• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • column-span

    版本:CSS3

    CSS 属性column-span 的值被设置为all时,可以让一个元素跨越所有的列。一个跨越多列的元素被称为spanning element。

    示例

    column-span: none;
    column-span: all;
    
    column-span: inherit;
    

    浏览器支持

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

    语法

    column-span:none| all

    取值:

    • none:元素不跨多个列。
    • all:元素横跨所有列。元素出现之前,出现在元素之前的正常流中的内容在所有列之间自动平衡。该元素建立一个新的块格式上下文。
    默认值none
    适用于除浮动和绝对定位之外的块级元素
    继承性
    动画性
    计算值指定值

    例子

    下例中的 h2 元素横跨 article 元素中的各列

    <article>
      <h2>my very special columns</h2>
      <p>this is a bunch of text split into three columns
         using the css `columns` property. the text
         is equally distributed over the columns.</p>
    </article>
    
    //CSS
    article {
      columns: 3;
    }
    
    h2 {
      column-span: all;
      -webkit-column-span:all;/*safari and chrome*/
    }
    
    <style>
    .content-box {
    	width:20%;
    	padding:20px;
    	border: 10px solid #000000;
    	column-count:3;
    	-moz-column-count:3;/*firefox*/
    	-webkit-column-count:3;/*safari and chrome*/
    }
    .content-box .items
    {
    	border:1px solid #ff6633;
    	padding:10px;
    	height:100%;
    	overflow:hidden;
    }
    .content-box .column-span
    {
    	border:1px solid #0000ff;
    	column-span:all;
    	-moz-column-span:all;/*firefox*/
    	-webkit-column-span:all;/*safari and chrome*/
    }
    </style>
    
    <h3>效果:</h3>
    <div class="content-box">
    	<p class="items">第一列文字部分:内容内容内容内容内容内容</p>
    	<p class="items">第二列文字部分:内容内容内容内容内容内容</p>
    	<p class="items column-span">第三列文字部分:内容内容内容内容内容内容</p>
    	<p class="items">第四列文字部分:内容内容内容内容内容内容</p>
    	<p class="items">第五列文字部分:内容内容内容内容内容内容</p>
    </div>
    

    效果:

    第一列文字部分:内容内容内容内容内容内容

    第二列文字部分:内容内容内容内容内容内容

    第三列文字部分:内容内容内容内容内容内容

    第四列文字部分:内容内容内容内容内容内容

    第五列文字部分:内容内容内容内容内容内容

    上篇:column-rule-color

    下篇:break-inside