HTML停靠到底 [英] HTML dock to bottom

问题描述

我有以下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;
  }

我想对齐命令 div到 gallery-item 分类div的底部。以上所有方法均无效，命令坚持使用上一个元素：

I want to align commands div to the bottom of gallery-item classed div. None of the above worked, the commands sticks to the preceding element:

推荐答案

添加位置：相对于父对象的相对位置。

Add position: relative to the parent.

.gallery-item {
    position: relative;
}

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

使用职位 ing，您需要明确指定。

When you are using positioning, you need to specify explicitly.

这篇关于HTML停靠到底的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！