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

Question

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

• DIV网格（以任意数量的列表示），N（可以是5到20，甚至更多）
• 网格应该是流动的，也就是说每个DIV都会随着浏览器宽度的变化而收缩和扩展，以便DIV占据浏览器宽度的100％
• 在特定浏览器宽度下，网格切换到N-1列布局，即丢失一列，并且DIV再次扩展以适合浏览器宽度
• 该过程应重复进行，直到布局变为基于单列，并且DIV宽度再次变化

我说起来并不难，但是它的行为应与本页面中的图像相似，但应该一直向下到一列，而不是立即从三列跳到六列。

我知道我可以使用Javascript来完成此操作，就像在上面的链接中一样，可以通过@media查询（使用很多手动调整列宽来完成），但是我想知道是否有办法仅在CSS中做到这一点，并让浏览器为我完成工作？

谢谢。

Answer 1

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

这是正在运行的网格系统的示例。http://jsfiddle.net/rlemon/yS78x/1/

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