javascript - 如何在 CSS 的可调整大小的空间中排列不同长度的元素？

Question

我想大致像这样排列元素:

item1      item2           i3           longitemname
i4         longitemname2   anotheritem  i5

基本上，不同长度的元素排列在类似表格的结构中。棘手的部分是这些容器的大小可能会有所不同，我想在每一行中尽可能多地容纳 - 换句话说，我不会事先知道一行中有多少元素，以及页面是否调整大小后，元素应重新流动以适应。例如。最初每行可以容纳 10 个元素，但在调整大小时可以减少到 5 个。

我认为我不能使用 html 表格，因为我不知道列数(因为我不知道一行可以容纳多少列)。我可以使用 css 使它们 float ，但由于它们的大小各不相同，因此它们不会排成一行。

到目前为止，我唯一能想到的就是使用 javascript 获取最大元素的大小，将所有元素的大小设置为该大小，然后将所有内容 float 。

有更好的建议吗？

Answer 1

这可以通过使用 float div、计算最大宽度并将所有宽度设置为最大值来完成。这是执行此操作的 jquery 代码:

html:

<div class="item">something</div>
<div class="item">something else</div>

CSS:

div.item { float: left; }

j查询:

var max_width=0;
$('div.item').each( function() { if ($(this).width() > max_width) { max_width=$(this).width(); } } ).width(max_width);

不太丑但也不太漂亮，我仍然愿意接受更好的建议...