5

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

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

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

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

谢谢。

4

1 回答 1

1

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

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

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

于 2012-04-11T19:22:15.557 回答