css 3可以创建等高文本列,通过column-count、column-width、column-gap属性实现。假设标记如下:
<h1>Socrates</h1>
<div class="col">
<p>After philosophizing for a while, Socrates decided that he was tired of constantly asking questions in response to other questions. Consequently, he decided to form his own rock group, the Socratic Four, which consisted of Aristotle on the drums, Plato on bass, Euclid on lead guitar, and Socrates himself on vocals. The group actually became very successful, touring Greece for about 2 years, and earning god-like status in Athens. At one point, there were plans for a huge mega-concert on Mount Olympus to celebrate the band. However, these plans were cut short when Plato abruptly left the band, citing philosophical differences with Socrates as the major reason for breakup. After the demise of the Socratic Four, Socrates continued to tour with a backup band, performing vocals for the Four's greatest hits.</p>
</div>
下面的规则创建一个三列布局,每列的宽度为14em,列之间有2em的间距。CSS列的优点之一是在可用的空间小于已定义列的宽度时的处理方式,列不会像使用浮动时那样回绕,而是会减少列数,因此,如果空间不够显示三列,就会减少到两列。
.col {
-moz-column-count: 3;
-moz-column-width: 14em;
-moz-column-gap: 2em;
-moz-column-rule: 1px solid #ccc;
-webkit-column-count: 3;
-webkit-column-width: 14em;
-webkit-column-gap: 2em;
-webkit-column-rule: 1px solid #ccc;
}
可以发现浏览器对CSS列的支持还不广泛,因此,除了常规代码,还需要使用特定于浏览器相关的扩展。