Javascript 如何在CSS的可调整大小的空间中排列不同长度的项？

我想大致按如下方式排列项目：

item1      item2           i3           longitemname
i4         longitemname2   anotheritem  i5

<ul style="float: left;">
    <li>Short</li>
    <li>Loooong</li>
    <li>Even longer</li>
</ul>
<ul style="float: left;">
    <li>Loooong</li>
    <li>Short</li>
    <li>...</li>
</ul>
<ul style="float: left;">
    <li>Semi long</li>
    <li>...</li>
    <li>Short</li>
</ul>

基本上，不同长度的物品排列成桌状结构。棘手的部分是这些文件的容器可能大小不一，我希望在每一行中容纳尽可能多的文件-换句话说，我事先不知道一行中可以容纳多少个文件，如果调整页面大小，文件应该重新流动以适应。例如，最初每行可以容纳10个项目，但在调整大小时可以减少到5个

我不认为我可以使用html表，因为我不知道列的数量（因为我不知道一行可以容纳多少列）。我可以使用css来浮动它们，但是因为它们的大小不同，所以它们不会对齐

到目前为止，我能想到的唯一一件事是使用javascript获取最大项目的大小，将所有项目的大小设置为该大小，然后将剩余的所有内容浮动

---

有更好的建议吗？

您可以使用左浮动的块级元素，但您需要一些javascript来检查大小，找到最大的元素，并将它们全部设置为该宽度

---

编辑：只需阅读你文章的后半部分，就可以看到你提出了这个修复方案。根据您当前的想法，将此帖子计算为+1:）

您实际上需要计算maxWidth和maxHeight，然后在页面加载后使用Javascript中的调整大小功能。我在之前的一个项目中必须这样做，如果div的高度不同，其中一个浏览器（FF？）将阻塞/偏移下面的浏览器

那么，你能为每个“项”创建一个浮动div，并循环其属性并使用换行符吗？然后，当您完成对属性的循环时，关闭div并启动一个新的div？这样，它们将像圆柱一样，彼此相邻浮动。如果窗口很小，它们将下降到下一个“行”，调整大小后，将向上浮动到右侧（实际上是左侧：-）

您可以浮动两个无序列表，如下所示：

item1      item2           i3           longitemname
i4         longitemname2   anotheritem  i5

<ul style="float: left;">
    <li>Short</li>
    <li>Loooong</li>
    <li>Even longer</li>
</ul>
<ul style="float: left;">
    <li>Loooong</li>
    <li>Short</li>
    <li>...</li>
</ul>
<ul style="float: left;">
    <li>Semi long</li>
    <li>...</li>
    <li>Short</li>
</ul>

短
龙翁
甚至更长


龙翁
短



半长

短

---

这将要求您计算应将多少列表中的多少列表项放入DOM中，但通过这种方式-当您调整容纳列表的容器的大小时-列表将浮动以适合该容器。

这可以使用浮动div完成，计算最大宽度，并将所有宽度设置为最大值。下面是jquery代码：

html:

jquery：

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

---

不太难看，但也不太漂亮，我仍然愿意接受更好的建议…

当你得到一件非常大的物品，而其他的看起来很小时会发生什么？我会考虑两种解决方案：

你已经想到了一个浮动：左；规则和jQuery，但也具有最大宽度或

只需根据您期望的值来决定所有项目的预设宽度即可

---

然后添加一个溢出：隐藏；规则使较长的项目不会改变表的外观。您甚至可以更改jQuery函数来修剪较长的项，在末尾添加省略号（…）。

您可以对每一列使用相同的宽度

您将有一个固定的列宽，但列表将自动回流。 我添加了一点额外的HTML，但现在它可以在FF en IE中工作

html:

---

那我想你应该用一张桌子。毕竟，这就是桌子的用途。但我认为有一个很好的理由不这样做？：）无论如何，要务实。如果它可以跨浏览器工作，那么它也可以工作。如果出现故障，或者您编写的代码变得太慢，那么请调整并修复性能。听说过“发射垃圾，但发射”这句格言吗？我对它发誓（当然也有例外——这个案子不是其中之一）。。。。因为你似乎已经想出了一个解决方案，虽然不是很漂亮。这一个对我不起作用-它显示为一个简单的列表，无回流（FF 2.x）；应显示：内联；不它仅在ff3中受支持。此外，他设置了一个固定的宽度，所以它不起作用。这几乎只是一张表。对，我更改了答案，使之成为跨浏览器的。

<ul class="ColumnBasedList">
  <li><span>Item1 2</span></li>
  <li><span>Item2 3</span></li>
  <li><span>Item3 5</span></li>
  <li><span>Item4 6</span></li>
  <li><span>Item5 7</span></li>
  <li><span>Item6 8</span></li>
</ul>

.ColumnBasedList
{
    width: 80%;
    margin: 0;
    padding: 0;
}

.ColumnBasedList li
{
    list-style-type: none;
    display:inline;
}

.ColumnBasedList li span
{
    display: -moz-inline-block;
    display: inline-block;
    width: 20em;
    margin: 0.3em;
}