我有一个三列布局,在每个列中都有一个按钮,我想放在底部,每列的高度相同,如下所示:
col1 header col2 header col3 header
content content content content content content
content content content content content content
content content content content content content
content content content content
content content content content
content content
content content
<button> <button> <button>
我希望三个按钮在底部对齐(根据内容最长的列)。
我的html看起来像这样:
<div class="col-md-4">
<h2>col1 header</h2>
<p>content [...]</p>
<p class="text-center">
<a href="#" class="btn btn-primary">button</a>
</p>
</div>
<div class="col-md-4">
<h2>col1 header</h2>
<p>content [...]</p>
<p class="text-center">
<a href="#" class="btn btn-primary">button</a>
</p>
</div>
<div class="col-md-4">
<h2>col1 header</h2>
<p>content [...]</p>
<p class="text-center">
<a href="#" class="btn btn-primary">button</a>
</p>
</div>
更重要的是,它是响应式的,因此,当要缩小每一列的显示时,它只会出现在另一列之下。
谁能给我一些小费?
-
看看这个相关的问题:Bootstrap: align elements to bottom of column
我找到的解决方案:http://www.bootply.com/mSxIMFgHSi#
最佳答案
解决了
版本1-仅使用CSS
尝试使用display
:table
,table-cell
和table-row
only css demo
only css fullscreen
的CSS
.wrapper {
display:table;
border-collapse:collapse;
}
.wrap {
display:table-row;
}
.item {
display:table-cell;
border: 1px solid #ccc;
padding-bottom:50px;
position:relative;
}
a.btn{
position:absolute;
bottom:10px;
left:40%;
}
请参阅此说明(如果不可读,请保存此图片)
参考博客
Equal height boxes with CSS
Fluid Width Equal Height Columns
使用jQuery的第2版
您可以使用小jQuery做到这一点
var maxHeight = 0;
$("div").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$("div").height(maxHeight);
jQuery Demo
jQuery Fulscreen