我想使用包含任意数量文本的可变数量的“盒子”来创建网页设计，并使设计看起来有点像桌子。然而，在屏幕尺寸较小的情况下（即移动电话），我希望单元在下一行中“继续”。
我的想法是使用带有float：left的div来创建单元格，但各种div的高度不同，从而使整个看起来很难看。
使用这种基于div的概念来创建固定数量的列的人似乎有很多黑客攻击，但是如何让它适用于这个特定的问题呢？
答案 0 :(得分：1)
我只是使用javascript来遍历相关div的列表，获得最高的div的高度。然后我会明确地说明所有这些内容的高度。
请考虑以下事项：
<强> CSS：
#container
{
display: inline-block;
width: 25%; /* for the sake of the example only. serves no purpose other than forcing two rows of 3 items, when viewed on a 1366px wide monitor */
}
.floatLeft
{
float: left;
border: solid 2px red; /* also only for the sake of the example */
}
<强> HTML：
<body>
<div id='container'>
<div class='floatLeft'>
This has 1 line
</div>
<div class='floatLeft'>
This has 1 line<br>
This has 1 line
</div>
<div class='floatLeft'>
This has 1 line<br>
This has 1 line<br>
This has 1 line
</div>
<div class='floatLeft'>
This has 1 line<br>
This has 1 line<br>
This has 1 line<br>
This has 1 line
</div>
<div class='floatLeft'>
This has 1 line<br>
This has 1 line<br>
This has 1 line<br>
This has 1 line<br>
This has 1 line
</div>
<div class='floatLeft'>
This has 1 line<br>
This has 1 line<br>
This has 1 line<br>
This has 1 line<br>
This has 1 line<br>
This has 1 line
</div>
</div>
</body>
最后，'魔术'发生在哪里： 的 JAVASCRIPT：
function setHeights()
{
var divList = document.getElementsByClassName('floatLeft');
var i, n = divList.length;
var maxHeight = 0;
for (i=0; i<n; i++)
{
if (divList[i].clientHeight > maxHeight)
maxHeight = divList[i].clientHeight;
}
for (i=0; i<n; i++)
divList[i].style.height = maxHeight + "px";
}