css中有三列以上

Question

在css页面中创建3-8列的最佳方法是什么。理想情况下，它们只是从左到右堆叠。

有什么想法吗？

谢谢，

Answer 1

使用带有float属性的div和css

Answer 2

• 带有显示的多个div：内联块（体面，但在旧浏览器中缺乏支持）
• 浮动的多个div：向左或向右（浮动很难处理，并且可以使你的布局在其他方面不灵活）
• 带显示的多个div：table-cell（在我的测试中有一些像自动宽度这样的整洁效果，但我对这里的跨浏览器支持水平持谨慎态度）

然后是this SO post。

Answer 3

对于mozilla和webkit，请使用[-moz-|-webkit-]column-count属性。你像这样使用它

<div id="mcol">
   <p>...</p>
   <p>...</p>
</div>

#mcol {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}

有关多列的详细信息和其他有用属性，请参阅此article。

对于IE，请参阅此article中的方法或使用脚本。