HTML | DOM 样式 columnGap 属性

简介

CSS3引入了多列布局属性，可以使得文本内容更好地适应各种终端设备。其中，columnGap属性用于设置列间距，即每一列之间的间隔大小。

语法

column-gap: length | normal | initial | inherit;

• length：指定列间距的长度值。单位可以是px、em、rem、pt等。
• normal：默认值，列间距为0。
• initial：使用列间距的默认值。
• inherit：继承父元素的列间距值。

示例

设置一个三列布局，每一列宽度为200px，间距为20px。

<style>
    #container {
        column-count:3; /*设置列数为3*/
        column-gap:20px; /*设置列间距为20px*/
        width:660px;
        margin:0 auto;
    }
    #container p {
        margin:0;
        padding:20px;
        background-color:#eee;
    }
</style>

<div id="container">
    <p>1Lorem ipsum dolor sit amet, consectetur adipiscing elit,.</p>
    <p>2Suspendisse ante magna, bibendum vel suscipit eu,.</p>
    <p>3Phasellus at tincidunt magna, vel placerat leo.</p>
    <p>4Cras cursus dignissim enim, eu consequat est facilisis at.</p>
    <p>5Proin sed ante eget ipsum molestie pharetra id eget odio.</p>
    <p>6In ac felis orci.</p>
    <p>7Vivamus auctor ligula non augue eleifend,.</p>
    <p>8Integer faucibus, mauris tempus blandit cursus,.</p>
    <p>9Maecenas eu sollicitudin felis.</p>
</div>

效果如下：

注意事项

• columnGap属性只对多列布局（即column-*属性）有效。
• 由于不是所有浏览器都支持多列布局，所以在使用该属性时要注意兼容性问题。