CSS 3列(等高文本列)

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列的支持还不广泛,因此,除了常规代码,还需要使用特定于浏览器相关的扩展。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,868评论 1 92
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,836评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,357评论 0 11
  • 前言 温馨提示:本文较长,图片较多,本来是想写一篇 CSS 布局方式的,但是奈何 CSS 布局方式种类太多并且实现...
    sunshine小小倩阅读 3,205评论 0 59
  • 嫁的人,很重要。因为他决定着你一辈子的生活状态。娶的人,更重要。她很有可能决定着你一生的层次和高度。不要将就的嫁,...
    YIBAO阅读 641评论 0 5