具有自动调整列数的流体网格

Question

我想知道 CSS 是否可以实现以下功能：

• DIV 网格，在任意数量的列中，比如说 N（可以是 5 到 20 或更多）
• 网格应该是流动的，即每个 DIV 都会随着浏览器宽度的变化而收缩和扩展，以便 DIV 占据浏览器宽度的 100%
• 在一定的浏览器宽度下，grid切换到N-1列布局，即丢失一列，DIV再次展开以适应浏览器宽度
• 应重复此过程，直到布局变为基于单列，DIV 宽度再次保持流动

我有点难以形容，但它的行为应该与 page 中的图像类似，但它应该一直向下到一列，而不是立即从三列跳到六列布局.

我知道我可以使用 Javascript 来做到这一点，就像在上面的链接中所做的那样，使用 @media 查询（有很多手动摆弄列宽），但我想知道有没有办法做到这一点在 CSS 中，让浏览器为我完成工作？

谢谢。

Answer 1

您是否考虑过使用 Twitter Bootstrap Grid 系统？或者至少审查并采用类似的系统？ http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem 使用他们的“响应式”网格 css（或他们所说的任何名称）。

这是一个实际使用的网格系统示例。 http://jsfiddle.net/rlemon/yS78x/1/

它利用媒体查询，就像你上面提到的......但它已经为你完成了，IMO 是更容易采用的网格系统之一。