1

我想排列大约像这样的项目：

item1      item2           i3           longitemname
i4         longitemname2   anotheritem  i5

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

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

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

有更好的建议吗？

4

7 回答 7

2

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

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

于 2008-09-23T19:53:57.493 回答
1

当你得到一件大得离谱的东西而让其余的看起来很小时会发生什么？我会考虑两种解决方案：

  1. 你已经想出的涉及 float:left; 规则和 jQuery，但也具有最大 max_width 或
  2. 只需根据您期望的值预先确定所有项目的预设宽度

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

于 2008-09-23T20:00:31.377 回答
0

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

编辑：刚刚阅读了你帖子的后半部分，看到你提出了这个修复建议。将此帖子视为您当前想法的 +1 :)

于 2008-09-23T18:44:58.003 回答
0

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

于 2008-09-23T19:38:29.137 回答
0

好吧，您可以为每个“项目”创建一个浮动 div，然后循环遍历其属性并使用换行符吗？然后当你完成对属性的循环时，关闭 div 并开始一个新的？这样它们就会像柱子一样，彼此相邻浮动。如果窗口很小，它们将下降到下一个“行”，并且在调整大小时，将向上浮动到右侧（实际上是左侧:-)

于 2008-09-23T19:44:32.460 回答
0

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

<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 进行一些计算，但是这样 - 当您重新调整包含列表的容器的大小时 - 列表将浮动以适合该容器.

于 2008-09-23T19:52:33.690 回答
0

您可以在每列具有相同宽度的情况下使用以下内容。

您将拥有固定的列宽，但列表会自动重排。我添加了一些额外的 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;
}
于 2008-09-23T20:01:44.917 回答