dio*_*ney 6 html css height twitter-bootstrap
见下图:
我需要的是扩大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>
Run Code Online (Sandbox Code Playgroud)
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;
}
Run Code Online (Sandbox Code Playgroud)
由于某些原因,小提琴与上面代码的图像不相似,但是如果你将test.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)
});
});
Run Code Online (Sandbox Code Playgroud)
要使用 jQuery 解决方案执行此操作:
首先将该类添加eHeight
到要赋予相同高度的行中的所有 div。然后添加下面的 jQuery:
$('.eHeight').each(function () {
var eHeight = $(this).parent().innerHeight();
$(this).outerHeight(eHeight);
});
Run Code Online (Sandbox Code Playgroud)
请参阅此处的小提琴: http: //jsfiddle.net/VA6D4/
请注意,jQuery 需要位于 a 中$(window).load
,因为 Google Chrome 在加载图像之前为图像提供 0 高度和宽度。
归档时间: |
|
查看次数: |
3912 次 |
最近记录: |