column-gap属性怎样用【html5教程】

column-gap属性用于指定的列之间的差异，在指定某个元素应分为多少列今后运用。

CSS3 column-gap属性

作用：column-gap属性用于指定的列之间的差异。

运用前提：在运用column-count属性或column-width属性设置好元素的列数后，column-gap属性才会见效。

语法：

column-gap: length|normal;

参数：

length：一个指定的长度，将设置列之间的差异

normal：指定一个列之间的一般差异。

申明：假如指定了列之间的间隔划定规矩，它会取平均值。

CSS3 column-gap属性的运用示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div{
margin:20px 0px;
}
.normal
{
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari and Chrome */
column-count:4;
-moz-column-gap:normal; /* Firefox */
-webkit-column-gap:normal; /* Safari and Chrome */
column-gap:normal;
}
.length
{
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari and Chrome */
column-count:4;
-moz-column-gap:50px; /* Firefox */
-webkit-column-gap:50px; /* Safari and Chrome */
column-gap:50px;
}
</style>
</head>
<body>
<h3>设置column-gap:normal;</h3>
<div class="normal">
当我年青的时刻，我妄想转变这个天下；当我成熟今后，我发明我不能够转变这个天下，我将眼光缩短了些，决议只转变我的国度；当我进入晚年今后，我发明我不能够转变我们的国度，我的末了希望仅仅是转变一下我的家庭，然则，这也不能够。当我如今躺在床上，风烛残年时，我倏忽意想到：假如一开始我仅仅去转变我本身，然后，我能够转变我的家庭；在家人的协助和勉励下，我能够为国度做一些事变；然后，谁知道呢?我以至能够转变这个天下。
</div>
<h3>设置column-gap:50px;</h3>
<div class="length">
当我年青的时刻，我妄想转变这个天下；当我成熟今后，我发明我不能够转变这个天下，我将眼光缩短了些，决议只转变我的国度；当我进入晚年今后，我发明我不能够转变我们的国度，我的末了希望仅仅是转变一下我的家庭，然则，这也不能够。当我如今躺在床上，风烛残年时，我倏忽意想到：假如一开始我仅仅去转变我本身，然后，我能够转变我的家庭；在家人的协助和勉励下，我能够为国度做一些事变；然后，谁知道呢?我以至能够转变这个天下。
</div>
</body>
</html>

效果图：