我有以下 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 的底部。以上均无效,命令
坚持前面的元素:
最佳答案
将 position: relative
添加到父级。
.gallery-item {
position: relative;
}
.gallery-item #commands {
position: absolute;
bottom: 1px;
}
当您使用position
ing 时,您需要明确指定。
关于HTML 停靠到底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14027257/