zoukankan      html  css  js  c++  java
  • ch8 CSS 3列(等高文本列)

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

  • 相关阅读:
    Network File System
    模拟网络抖动及网络延迟
    python with statements
    Centos 7
    Blind Carbon Copy
    git
    python time
    valgrind3.11.0
    tinycore os
    about arp_ignore arp_filter arp_announce rp_filter
  • 原文地址:https://www.cnblogs.com/lmjZone/p/7738612.html
Copyright © 2011-2022 走看看