见下图:
我需要的是扩大 B 列以匹配第一列的高度,或者如果我有几列,它们总是保持相同的高度,调整到最大的列高。
我已经玩了一段时间没有任何成功<div class="clearfix"></div>
和height: 100%
。
我正在使用Twitter Bootstrap 2.3.2。
HTML:
<div id="main" class="row-fluid">
<div class="span6">
<div>
ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
BBBBBBBBBBBBBBBBBBBBBBBBBB
</div>
</div>
<div class="span6">
<div>
B
</div>
</div>
</div>
CSS:
@import url("http://twitter.github.com/bootstrap/assets/css/bootstrap.css");
#main {
height: 5em;
}
.span6 {
background-color: lightgray;
border: 1px solid red;
}
.span6 > div {
background-color: lightblue;
border: 1px solid green;
}
由于某种原因,小提琴与上面代码的图像不相似,但是如果将其粘贴到 atest.html
中,它可以正常工作。
编辑:
以及如何对齐内部span div
s 的高度?
编辑2:
在@Coop 的指导下,我终于设法解决了这个问题。我来到以下代码:
var content_height = [];
jQuery('.row-fluid > div')
.each(function () {
content_height.push(jQuery(this).css({minHeight: 0}).height());
})
.each(function () {
jQuery(this).css({
minHeight: Math.max.apply(Math, content_height)
});
});