我有几个带有不同文本内容的 DIV 标签。
HTML:
它们采用二行二列布局,宽度是自适应的:
CSS:
我想让它们的高度都相同。 因此,我循环它们并找到最高的一个的高度。然后我再次循环并将它们全部设置为该高度。 jQuery:
HTML:
<div id="boxes">
<div id="boxone">
<p>...</p>
</div>
<div id="boxtwo">
<p>...</p>
</div>
<div id="boxthree">
<p>...</p>
</div>
<div id="boxfour">
<p>...</p>
</div>
</div>
它们采用二行二列布局,宽度是自适应的:
CSS:
div#boxes {
width: 100%;
}
div#boxes div {
width: 49.9%;
float: left;
}
我想让它们的高度都相同。 因此,我循环它们并找到最高的一个的高度。然后我再次循环并将它们全部设置为该高度。 jQuery:
$(function() {
var maxHeight = 0;
$('div#boxes div').each(function(){
if (maxHeight < $(this).height()) {maxHeight = $(this).height()}
});
$('div#boxes div').each(function(){
$(this).height(maxHeight);
});
});
如果 div 的高度不需要再次更改,则此方法有效。
但是,如果我调整浏览器窗口大小,则该方法会失败:
如果我(a)使浏览器变宽,那么(b)我的 DIV 变宽,那么(c)它们的文本内容换行次数减少,然后(d)我的 DIV 太高。
如果我(b)使浏览器变窄,那么(b)我的 DIV 变窄,那么(c)它们的文本内容换行次数增多,然后(d)我的 DIV 太短。
如何既自动调整 DIV 的高度以适应其内容,又保持这些多个 DIV 相同的高度?