变栏页面

Question

好吧，这里是我的困境。我有一堆与宽度相同的div（但高度可变）。我希望它们显示在页面上方，直到页面底部，如果页面上的这些项目的第二列没有滚动空间，那么我希望它继续在第二列，第三列列等。如果页面上没有可用空间，那么它会离开需要滚动条的页面来查看下面的内容。

这基本上类似于有浮动：如果它存在（它可悲地没有）。另外我希望这可以随窗口大小动态变化。如果我将窗口缩小到一列宽度，我希望数据直接向下一列。如果我调整到两列的宽度，那么它会在两列之间划分数据。

最后，div的顺序必须保留。我愿意使用jQuery和CSS（包括CSS3）来做到这一点，其他任何事情我都必须看看。我相信，如果我在这方面工作，我可以编写一些自定义的jQuery脚本来做到这一点，但我不禁感觉应该更容易。我看过css3列，但无法让他们做我想做的事情，所以如果他们可以做到这一点，具体如何他们这样做。

Answer 1

您是否听说过媒体查询？在特定的中断点，您可以应用不同的CSS规则，因此您可以更改列的布局。

Have a read.