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

StackOverflow https://stackoverflow.com/questions/122920

题

我想按照这样的方式排列项目：

item1      item2           i3           longitemname
i4         longitemname2   anotheritem  i5

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

我认为我不能使用html表，因为我不知道列的数量（因为我不知道有多少列适合一行）。我可以使用css来浮动它们，但由于它们的大小不同，它们不会排列。

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

有更好的建议吗？

有帮助吗？

解决方案

这可以使用浮动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);

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

其他提示

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

  1. 你已经想出了一个涉及浮动的东西：左;规则和jQuery，但也有最大max_width或
  2. 根据您希望在那里的值
    3. ，根据预先确定所有项目的预设宽度

    然后添加溢出：隐藏;规则，所以较长的项目不会使表格看起来。您甚至可以更改jQuery函数来修剪更长的项目，最后添加省略号（...）。

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

编辑：刚刚阅读了帖子的后半部分，看到你提出了这个问题。将此帖子计为当前想法的+1：）

您实际上需要计算maxWidth和maxHeight，然后在页面加载后在Javascript中使用resize函数。我必须为之前的项目执行此操作，如果div的高度变化，其中一个浏览器（FF？）将阻止/偏移下面的那些。

那么，你能为每个“项目”创建一个浮动的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中的列表项进行一些计算，但是这样 - 当你重新调整容纳列表的容器的大小时 - 列表将浮动以适应进入那个容器。

您可以使用以下列，每列的宽度相同。

您将拥有固定的列宽，但列表会自动重排。 我添加了一些额外的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;
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top