提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > column-gap属性怎样用【css教程】,column-gap,CSS3

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>

效果图:

以上就是column-gap属性怎样用的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"column-gap属性怎样用【css教程】,column-gap,CSS3"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线