jquery - 流体 CSS 网格结构可能吗？

Question

简短的版本:我有一个元素，我需要定义一个 DIV，它将水平重复，然后在空间不足时换行到下一行(类似表格的网格)。我见过提到 jQuery.GridLayout，但演示/主页是 404，所以我不知道这是否是我正在寻找的。简而言之，我正在努力实现这一目标:

Div.ItemClass   Div.ItemClass   Div.ItemClass   Div.ItemClass
Div.ItemClass   Div.ItemClass   Div.ItemClass   Div.ItemClass
...

诀窍是我被迫使用同一个类(我确实可以访问替代项模板，该模板将为每个替代项插入不同的代码)，但我需要它们水平“堆叠”直到用完水平空间，然后“换行”到下一行。

快速背景 - 该元素位于 CMS 系统内，元素列表模块为我提供了以下模板文件以在“列表” View 中使用:

-Header
-Item
-Alternate Item
-Footer

想法、想法？

编辑:好的，所以我有点白痴，忘记了规则#1 - 检查你的(渲染的)源代码。最重要的问题是，正在使用的 CMS 模块将每个模板对象(页眉、元素、备用、页脚)“包装”在 TD 元素内，这使得真正的“包装 div”几乎不可能。我很高兴我没有发疯，因为我相当确定嵌套 DIV 是正确的方法。

编辑#2:好的，现在我想我可以通过一些 jQuery 操作来实现这一点。我需要定位 Div.ItemClass ，然后将它们放置在定位的包装 div 内，可能覆盖/替换现有的表格布局代码(可能在标题模板中使用？)。截至此编辑，渲染时强制执行的当前代码是:

<td><!--This is Header.html --><div class="Container" /></td>
<td><!--This is Item.html --><div class="ItemName">Item 1</div></td>
<td><!--This is Alternate.html --><div class="ItemName">Item 2</div></td>
<td><!--This is Item.html --><div class="ItemName">Item 3</div></td>
<td><!--This is Footer.html -->[PAGER]</td>

我希望这是有道理的，正如我之前所说，很多表是由我必须在该元素中使用的 CMS 和模块系统强制生成的。

编辑 #3 - 设法让它发挥作用!添加了一些 jQuery:

$(function() {
    $('div.ItemClass').appendTo('#ContainerID');
});

简单地说，它从 TD 元素中获取 Div，并将它们放置在我放置在 Header.html 部分的 ContainerID 中!

Answer 1

如果你有固定的宽度，那就很容易了。只需将左浮动放在它们上并相应地安排宽度，以便只有 X 个元素位于一行上。类似的东西

<div class="container">
  <div class="item">lorem ipsum</div>
  <div class="item">lorem ipsum</div>
  <div class="item">lorem ipsum</div>
  <div class="item">lorem ipsum</div>
  <div class="item">lorem ipsum</div>
  <div class="item">lorem ipsum</div>
  <div style="clear: both;"></div> <!-- just to fix the height, remove to see effect. -->
</div>

和风格

.container {
   width: 500px;
}
.item {
   width: 100px; // for 5 items (without margins)
   float: left;
}