将DIV与底部或基线对齐
将DIV与底部或基线对齐
提问于 2010-01-07 01:53:02
我正在尝试将子div标记与父div标记的底部或基线对齐。
我想要做的就是将子Div放在父Div的基线上，下面是它现在的样子：
HTML
<div id="parentDiv">
<div class="childDiv"></div>
</div>CSS
#parentDiv
{
width:300px;
height:300px;
background-color:#ccc;
background-repeat:repeat
}
#parentDiv .childDiv
{
height:100px;
width:30px;
background-color:#999;
}便笺
我将有多个不同高度的childDiv，我需要它们都与基线/底部对齐。
回答 10
Stack Overflow用户
发布于 2010-01-07 01:59:51
您需要添加以下内容：
#parentDiv {
position: relative;
}
#parentDiv .childDiv {
position: absolute;
bottom: 0;
left: 0;
}声明absolute元素时，它是根据最近的非static父元素定位的(它必须是absolute、relative或fixed)。
Stack Overflow用户
发布于 2017-08-27 02:33:29
七年后，垂直对齐的搜索仍然提出了这个问题，所以我将发布另一个我们现在可用的解决方案: flexbox定位。只需在父div上设置display:flex; justify-content: flex-end; flex-direction: column (在此fiddle中也有演示)：
#parentDiv
{
display: flex;
justify-content: flex-end;
flex-direction: column;
width:300px;
height:300px;
background-color:#ccc;
background-repeat:repeat
}Stack Overflow用户
发布于 2013-11-29 20:17:12
使用table和table-cell的CSS显示值：
HTML
<html>
<body>
<div class="valign bottom">
<div>
<div>my bottom aligned div 1</div>
<div>my bottom aligned div 2</div>
<div>my bottom aligned div 3</div>
</div>
</div>
</body>
</html>CSS
html,body {
width: 100%;
height: 100%;
}
.valign {
display: table;
width: 100%;
height: 100%;
}
.valign > div {
display: table-cell;
width: 100%;
height: 100%;
}
.valign.bottom > div {
vertical-align: bottom;
}我在这里创建了一个JSBin演示：http://jsbin.com/INOnAkuF/2/edit
该演示还提供了如何使用相同技术垂直居中对齐的示例。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2015032
复制相关文章
相似问题