我在Bootstrap 3中有一行,在该行中有3列。我希望将其中两列与行的底部对齐,并将第一列保持在顶部。当我使用传统的方法,在父级中使用位置相对,在两个列中都使用绝对时,我得到了一个奇怪的行为,我想这是因为twitter引导程序中的某些东西。以下是正在发生的事情的引导:
绝对力把所有的柱子都压在一起,有人能帮我吗?最终的结果如下所示:
http://fahadalee.wordpress.com/2013/12/31/bootstrap-3-help-how-to-alin-div-in-bottom/
谢谢
发布于 2014-03-29 07:57:33
您可以在要底部对齐的两列上使用display: table-cell和vertical-align: bottom,如下所示:
.bottom-column
{
float: none;
display: table-cell;
vertical-align: bottom;
}
工作示例here。
此外,这可能是一个可能的duplicate question。
发布于 2014-03-29 08:02:59
垂直对齐底部并移除浮动似乎是可行的。然后我有了一个边际问题,但-2px可以防止它们被压下(它们仍然不会重叠)
.profile-header > div {
display: inline-block;
vertical-align: bottom;
float: none;
margin: -2px;
}
.profile-header {
margin-bottom:20px;
border:2px solid green;
display: table-cell;
}
.profile-pic {
height:300px;
border:2px solid red;
}
.profile-about {
border:2px solid blue;
}
.profile-about2 {
border:2px solid pink;
}
发布于 2017-03-22 18:18:26
我不知道为什么,但是对我来说,Marius Stanescu提出的解决方案打破了col1的特殊性(在col 3之后是col 4将占据所有的12行)
我找到了另一个可行的解决方案:
.bottom-column
{
display: inline-block;
vertical-align: middle;
float: none;
}
https://stackoverflow.com/questions/22724952
复制相似问题