流体网格，自动调整列数

Question

我想知道CSS是否可以使用以下内容：

• DIV的网格，在任意数量的列中，让我们说N（可以是5到20之间的任何一个或更多）
• 网格应该是流畅的，即每个DIV收缩并随着浏览器宽度的变化而扩展，以便DIV占用浏览器宽度的100％
• 在某个浏览器宽度下，网格切换到N-1列布局，即丢失一列，DIV再次展开以适合浏览器宽度
• 进程应该重复，直到布局变为单列为止，再次使用DIVs宽度为流体

我有点难以言语，但它应该与此page中的图像表现相似，但它应该一直向下到一列，而不是从三列跳到六列立即布局。

我知道我可以使用Javascript完成它，并且正如在上面的链接中所做的那样，使用@media查询（有大量手动摆弄列宽），但我想知道是否存在一种只在CSS中执行此操作的方法，并让浏览器为我工作吗？

感谢。

Answer 1

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

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

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