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

    版本:CSS3

    column-gap 该 CSS 属性用来设置元素列之间的间隔(gutter)大小。

    示例

    /* Keyword value */
    column-gap: normal; 
    
    /*  values */
    column-gap: 3px;
    column-gap: 2.5em;
    
    /*  value */
    column-gap: 3%;
    
    /* Global values */
    column-gap: inherit;
    column-gap: initial;
    column-gap: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    仅仅火狐、safari浏览器支持column-gap

    语法

    column-gap :normal| <length>| <percentage>

    取值:

    • normal:表示列之间的间隔宽度。在多列布局时默认间隔为1em,其他类型布局默认间隔为 0。
    • <length>:定义列之间的间隔大小。而且<length>值必须是非负数的。
    • <percentage>:用<percentage>(百分比)来定义列之间的间隔大小。同样的,<percentage>值也必须是非负数的。

    实例:

    div
    {
    	column-gap:40px;
    	-moz-column-gap:40px;/*firefox*/
    	-webkit-column-gap:40px;/*safari and chrome*/
    }
    
    <style>
    .content-box {
    	width:20%;
    	padding:20px;
    	border: 10px solid #000000;
    	column-count:3;
    	column-gap:50px;
    	-moz-column-gap:50px;/*firefox*/
    	-webkit-column-gap:50px;/*safari and chrome*/
    }
    .content-box .items
    {
    	border:1px solid #ff6633;
    	padding:10px;
    }
    </style>
    
    <h3>效果:</h3>
    <div class="content-box">
    	<p class="items">第一列文字部分:内容内容内容内容内容内容</p>
    	<p class="items">第二列文字部分:内容内容内容内容内容内容</p>
    	<p class="items">第三列文字部分:内容内容内容内容内容内容</p>
    	<p class="items">第四列文字部分:内容内容内容内容内容内容</p>
    	<p class="items">第五列文字部分:内容内容内容内容内容内容</p>
    </div>
    

    效果:

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

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

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

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

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

    上篇:column-count

    下篇:break-inside