我正在尝试将子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
,我需要它们都与基线/底部对齐。
发布于 2010-01-07 01:59:51
您需要添加以下内容:
#parentDiv {
position: relative;
}
#parentDiv .childDiv {
position: absolute;
bottom: 0;
left: 0;
}
声明absolute
元素时,它是根据最近的非static
父元素定位的(它必须是absolute
、relative
或fixed
)。
发布于 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
}
发布于 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
该演示还提供了如何使用相同技术垂直居中对齐的示例。
https://stackoverflow.com/questions/2015032
复制相似问题