HTML 停靠到底部答案

【问题标题】：HTML dock to bottomHTML 停靠到底部
【发布时间】：2012-12-11 05:23:39
【问题描述】：

我有以下 HTML：

<div class="gallery-item">
  <a href="ddd.pdf" style="display:block; width: 100%;">
    <span id="filename_1" style="white-space: nowrap;">Hello</span>
  </a>
  <div id="commands">
    <input type="text" readonly="readonly" value="https://blob">
    <a href="sdfasdfasdfasdf">Delete</a>
  </div>
</div>

CSS：

.gallery-item {
  border: 1px #AAA solid;
  display: inline-block;
  margin: 2px;
  padding 2px;
  width: 130px;
  height: 90px;
  text-align: center;
  border-radius: 5px;
  vertical-align: middle;
}    
  .gallery-item #commands {
    line-height: 4px;
    padding-bottom: 1px;
    vertical-align: bottom;
    bottom: 1px;
  }

我想将 commands div 对齐到 gallery-item 分类 div 的底部。以上都不起作用，commands 坚持前面的元素：

【问题讨论】：

不，巧合的是，正如您在右下角的图块中看到的那样，文件名被修剪了，它最初是“分析”。无论如何，我确实希望与我合作的秘书能够考虑一下。
顺便说一句，here 的修剪功能。欢迎您发表评论！

标签： html css alignment vertical-alignment dock

【解决方案1】：

将position: relative 添加到父级。

.gallery-item {
    position: relative;
}

.gallery-item #commands {
    position: absolute;
    bottom: 1px;
}

当您使用positioning 时，需要明确指定。

【讨论】：