码迷,mamicode.com
首页 > Web开发 > 详细

CSS 3列(等高文本列)

时间:2017-10-26 19:50:49      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:使用   除了   web   blog   width   支持   css   扩展   sop   

css 3可以创建等高文本列,通过column-count、column-width、column-gap属性实现。假设标记如下:

<h1>Socrates</h1>
    <div class="col">
    <p>After philosophizing for a while......</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列的支持还不广泛,因此,除了常规代码,还需要使用特定于浏览器相关的扩展。

CSS 3列(等高文本列)

标签:使用   除了   web   blog   width   支持   css   扩展   sop   

原文地址:http://www.cnblogs.com/lmjZone/p/7738612.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!