CSS中的报纸-栏目

Question

是否可以将css报纸-栏目布局安排为可以添加任意数量的栏目，并将它们连续添加到现有栏目的右侧。

我的想法是这样的:我只需要添加一个新的div，然后在右边添加一个新列，依此类推。

如果是，是如何实现的？

Here我发现了一个4栏的报纸版面。但是列的高度是不一样的。我需要一种方法，这样，无论文本有多长，它们都会被规定到一定的高度。

这在CSS中是可能的吗？

Answer 1

我认为使用现有的CSS框架最好满足您的需求，而不是自己从头开始编写它，因为这真的是一项棘手的业务，而且很难在所有浏览器上工作(因为其中一些浏览器不符合标准)。

无论如何，对于报纸专栏，我认为有一个符合条件的，960 Grid System。它有12 & 16列的“网格”，所有的排水沟和填充物都计算出来了，只要你打算使用的列数是12或16的因子，它就可以处理它。

Answer 2

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

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

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

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

Answer 3

对于纯CSS，很难将多个div指定为相同的高度，除非该高度是静态的。你可以使用丑陋的黑客，但这只能让你走到这一步。

对于真正的列，使用表，这就是它们的用途。表格是有效的HTML构造，只是你不应该把它们作为你唯一的布局工具。但是，当表工作时，请使用表。