1

好的，我正在尝试制作一个响应式网格，但它比这更复杂一些。它必须能够：

  • 调整大小，反应灵敏
  • 网格应该在一行中包含尽可能多的元素，并且
  • 必须有至少两个元素连续
  • 最小页面大小为 320px
  • 元素应保持纵横比

这是一个首发：http ://codepen.io/loredonut/pen/KJDAE

一个纯 CSS 的解决方案会很棒。谢谢你的帮助！

4

4 回答 4

2

您可以使用很多网格。

因为看起来你也要去移动屏幕，所以看看

960 格
1140 格

大多数网格将为您提供 x 数量的响应列，在较小的屏幕尺寸上折叠到100% 宽度。

现在，如果您真的想花哨，请查看CSS-column-count并CSS-colum-gap- 在这里找到CSS 技巧，（caniuse）。虽然您需要一些 IE6-9 的后备，但这应该允许您制作具有不同行高的列 - 就像在这个fiddle中一样。

于 2013-04-22T19:13:05.893 回答
1

有许多网格框架可能适合您的目的：

还有：

请参阅此相关问题。

顺便说一句，我个人最喜欢的是基金会。它非常活跃，基于 Compass/Sass。

于 2013-04-23T06:30:29.553 回答
1

我现在使用<img>s 并使它们响应，这是一个演示：http ://codepen.io/loredonut/pen/FGneA

于 2013-04-23T06:22:37.503 回答
0

尝试使用 twitter 引导程序 .. http://twitter.github.io/bootstrap/

你也可以将它与同位素http://isotope.metafizzy.co/结合并获得魔法效果:)

这也可以节省您将同位素与引导程序集成的时间：http: //mpezzi.github.io/bootstrap_isotope/

于 2013-04-22T19:04:30.500 回答