我想排列以下项目：

item1      item2           i3           longitemname
i4         longitemname2   anotheritem  i5

基本上，不同长度的项目以表格状结构排列。棘手的部分是这些容器的大小可以变化，我想在每一行中容纳尽可能多的容器，换句话说，我事先不知道一行中有多少个项目，以及页面是否调整大小的物品应重新排列以适应需要。例如。最初每行可以容纳10个项目，但调整大小后可以减少到5个项目。

我不认为我可以使用html表，因为我不知道列数(因为我不知道一行中可以容纳多少列)。我可以使用CSS来浮动它们，但是由于它们的大小不同，因此它们不会对齐。

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

还有更好的建议吗？

解决方案

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

编辑：只需阅读帖子的后半部分，并看到我们只是建议此修复程序。将此帖子算作我们当前想法的+1 ：)

实际上，我们实际上需要计算maxWidth和maxHeight，然后在页面加载后使用Javascript中的调整大小功能。我必须对先前的项目执行此操作，并且如果div的高度不同，则其中一个浏览器(FF？)会卡住/偏移下面的浏览器。

好吧，我们能为每个"项目"创建一个浮动div，并遍历其属性并使用换行符吗？然后，当我们完成对属性的循环时，关闭div并开始一个新的div吗？这样，它们将像圆柱一样，彼此紧挨着漂浮。如果窗口很小，它们将下拉至下一个"行"，并且在调整大小时，它们将向上浮动回到右侧(实际上是左侧的:-)

我们可以浮动几个无序列表，如下所示：

<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：

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

CSS：

div.item { float: left; }

jQuery的：

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

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

当我们获得一件大得可怜的物品而使其余物品看起来很小时，会发生什么呢？我会考虑两种解决方案：

• 我们已经想出的涉及float的内容：left;规则和jQuery，但也具有max max_width或者
• 只需根据我们期望的值确定所有物品的预设宽度即可

然后添加一个溢出：隐藏；规则，以便较长的项目不会影响外观。我们甚至可以更改jQuery函数以修剪较长的项目，并在末尾添加省略号(...)。

我们可以将以下内容用于每列相同的宽度。

我们将拥有固定的列宽，但是列表会自动重排。
我添加了一些额外的HTML，但现在可以在FF en IE中使用。

的HTML：

<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>

CSS：

.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;
}