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;

浏览器支持

语法

取值：

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

实例：

div
{
	column-gap:40px;
	-moz-column-gap:40px;/*firefox*/
	-webkit-column-gap:40px;/*safari and chrome*/
}

.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;
} 
效果：
第一列文字部分：内容内容内容内容内容内容
第二列文字部分：内容内容内容内容内容内容
第三列文字部分：内容内容内容内容内容内容
第四列文字部分：内容内容内容内容内容内容
第五列文字部分：内容内容内容内容内容内容

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com