Jquery 流体CSS网格结构可能吗？

简短而简单的版本：我有一个项目，我需要定义一个DIV，它将水平重复，然后在空间不足时换行到下一行（类似表格的网格）。我看到有人提到jQuery.GridLayout，但是演示/主页是404'd，所以我不知道这是否是我要找的。简单地说，我正试图做到这一点：

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

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

快速背景-项目位于CMS系统中，项目列表模块在“列表”视图中为我提供了以下模板文件：

想法，想法

编辑：好吧，所以我有点傻，忘记了规则#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>

---

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

如果你有固定的宽度，这很容易。只需在其上放置左浮动，并相应地安排宽度，以便一行中只有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>

---

如果你有固定的宽度，这很容易。只需在其上放置左浮动，并相应地安排宽度，以便一行中只有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>

---

人力资源管理。。。我想我试过了，但我会再试一次，看看会发生什么。好吧，我想我已经找到了我沮丧的根源。。。系统将每个“部分”（页眉、项目、备选项、页脚）包装在自己的TD中，从而打破了包装分区。可以说我是基于表格的布局的粉丝吗。。。只是一个观点。@Moshe-我完全同意你的意见，不过我正在尝试使用CSS进行网格/表格式布局，但是CMS系统的框架/后端和第三方模块正在添加额外的表格标记。如果你添加.container{overflow:auto；}，你将不需要清除div.Hrm。。。我想我试过了，但我会再试一次，看看会发生什么。好吧，我想我已经找到了我沮丧的根源。。。系统将每个“部分”（页眉、项目、备选项、页脚）包装在自己的TD中，从而打破了包装分区。可以说我是基于表格的布局的粉丝吗。。。这只是一个观点。@Moshe-我完全同意你的看法，不过我正在尝试使用CSS进行网格/表格式布局，但是CMS系统的框架/后端和第三方模块正在添加额外的表格标记。如果你添加.container{overflow:auto；}，你将不需要清除div。

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