像Windows 8一样在css中拆分报纸列

Question

我正在构建一个没有滚动条的交互式Web应用程序，它看起来像是Windows 8的现代UI。 我使用http://metroui.org.ua/来构建布局。 但是有一个问题，我想建立报纸栏目布局（可能是3），这里描述的是：

• 当我添加一个块（正方形或水平的反转）时，1列显示为线性布局（从左到右，从上到下）。最重要的是，当一个列已满时，该块将被添加到下一列。
• 我尝试使用3个div，但我无法自动将块移动到下一列（不使用javascript）。

有人能给我一些解决方案吗？

Answer 1

它不清楚你在这里诚实地问什么。您提供的模板链接是响应式并使用媒体查询，如果您向此布局添加新列，您需要了解所有这些是如何工作的，我认为这里的问题是您不要！？

Answer 2

CSS3提供了一种将任何HTML节点的内容转换为任意数量的列的方法。有一些属性可用于控制列数以及它们的宽度，相对高度（“填充”或内容在现有列之间的划分方式），列之间的沟槽，“规则”（分割线或边框）等。

作为起点，请参阅w3schools.com CSS3 Multiple Columns参考页。

然而，像往常一样，IE在广泛使用的浏览器中不支持column-CSS3属性。

一个跨浏览器的解决方案是Columnizer jQuery Plugin。