• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • columns

    版本:CSS3

    CSS属性columns用来设置元素的列宽和列数。它是一个简写属性,可在单个方便的声明中设置column-widthcolumn-count属性。与所有简写属性一样,任何省略的子值都将设置为其初始值。

    示例

    /* column width */
    columns: 18em;
    
    /* column count */
    columns: auto;
    columns: 2;
    
    /* both column width and count */
    columns: 2 auto;
    columns: auto 12em;
    columns: auto auto;
    
    /* global values */
    columns: inherit;
    columns: initial;
    columns: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE10以上版本的浏览器都支持columns

    语法:

    columns<column-width>||<column-count>

    取值

    • <column-width>:预计列宽,定义为<length>auto关键字。实际宽度可以更宽或更窄以适合可用空间。参见column-width
    • <<column-count>:元素内容应分成的预计列数,定义为<integer>auto关键字。如果此值和列的宽度都不是auto,则它仅指示允许的最大列数。请参阅column-count
    默认值看每个独立属性
    适用于除table外的非替换块级元素, table cells, inline-block元素
    继承性
    动画性
    计算值看每个独立属性

    例子

    //HTML
    
    <p class="content-box">
      this is a bunch of text split into three columns
      using the css `columns` property. the text
      is equally distributed over the columns.
    </p>
    
    //CSS
    .content-box {
      columns: 3 auto;
    }
    
    div{
     columns:100px 3;
     -webkit-columns:100px 3; /*safari and chrome*/
     -moz-columns:100px 3; /*firefox*/
    }
    

    下篇:break-inside