如何将浮动框元素(具有不同的高度)组织成行(使用JavaScript)

How to organize floating box elements (with varying height) into rows (with JavaScript)

本文关键字：高度 JavaScript 使用 元素      更新时间：2023-09-26

我有一个块元素列表。每个块元素都有一定的高度(不同的高度)。我想把块元素组织成行。

第一次尝试是遍历所有元素并将其高度设置为最高元素之一。但是，这会导致行与行之间出现空白，因为总是有一个元素明显高于其他元素。

所以，我想做同样的，但检测行并设置相应的高度。但是，我这样做有问题，因为element.getComputedStyle('left')返回浮动元素的undefined。

我可以使用的其他函数(使用YUI，但这应该无关紧要)?或者完全使用另一种方法?

您可以使用以下纯CSS解决方案:

HTML: 

<div class="row">
    <div>I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.</div>
    <div>I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.</div>
    <div>I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.</div>
    <div>I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.</div>
</div>    
<div class="row">
    <div>I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.</div>
    <div>I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.</div>
    <div>I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.</div>
    <div>I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.I can't. As much as I care about you, my first duty is to the ship. The unexpected is our normal routine.</div>
</div>
CSS 

.row div {
    display:table-cell;
    width:25%;
}

链接到jsFiddle:http://jsfiddle.net/innerurge1/Ys5Kw/

相关文章：