流体CSS网格结构可能吗？

Question

简短版本:我有一个项目,我需要定义一个水平重复的DIV,然后在空格不足时(表格状网格)换行到下一行.我已经看到提到jQuery.GridLayout,但是演示/主页是404'd所以我不知道这是否是我正在寻找的.简单地说,我正在努力实现这一目标:

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

诀窍是我被迫使用相同的类(我有权访问一个Alternate Item模板,它将为每个备用项插入不同的代码)但我需要它们水平"堆叠",直到它们用完水平空间并且然后'换行'到下一行.

快速背景 - 项目位于CMS系统内,项目列表模块为我提供了以下模板文件,可在"列表"视图中使用:

-Header
-Item
-Alternate Item
-Footer

思想,想法？

编辑:好的,所以我有点像个白痴,忘了规则#1 - 检查你的(渲染)来源.最重要的问题是正在使用的CMS模块是在TD元素内"包装"每个模板对象(标题,项目,替代,页脚),使得真正的"包装div"几乎不可能.我很高兴我不仅仅是因为我相当确定嵌套的DIV是正确的方法.

编辑#2:好的,现在我想我可以通过一些jQuery操作来解决这个问题.我需要定位Div.ItemClass,然后将它们放在定位的包装器div中,可能覆盖/替换现有的表格布局代码(可能在Header模板中使用？).在此编辑时,呈现时强制的当前代码是:

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