使用css进行文章简单的多栏排版

最新推荐文章于 2023-03-16 08:00:00 发布

原创最新推荐文章于 2023-03-16 08:00:00 发布 · 366 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

本文介绍了如何使用CSS的column-count和column-gap属性进行文章的多栏排版，包括设置列数和列间距，并提供了不同样式的实例展示。

案例中主要使用到column-count和column-gap来设置列数和列之间的间隔

**
例：

#text1{
border:1px solid #930;
line-height:1.5em;/*设置行高*/
/*em为一种测量单位，12点活字*/
-webkit-column-count:2;/*网站规定元素应该被分隔的列数为2*/
-moz-column-count:2;/*-column-count规定元素应该被分隔的列数*/
column-coumn:2;
-webkit-column-gap:4em;/*网站规定列之间的间隔*/
-moz-column-gap:4em;
column-gap:4em;/*规定列之间的间隔*/
}

在列数间隔中可设置多种样式

例1：

#text1{
border:1px solid #930;
line-height:1.5em;/*设置行高*/
/*em为一种测量单位，12点活字*/
-webkit-column-count:2;/*网站规定元素应该被分隔的列数为2*/
-moz-column-count:2;/*-column-count规定元素应该被分隔的列数*/
column-coumn:2;
-webkit-column-gap:4em;/*网站规定列之间的间隔*/
-moz-column-gap:4em;
column-gap:4em;/*规定列之间的间隔*/
-moz-column-rule:groove 10pt pink;/设置所有column-rule属性凹槽为10/
-webkit-column-rule:groove 10pt pink;
column-rule:groove 10pt pink;
}
#text2{
border:1px solid #930;
line-height:1.5em;
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;
-webkit-column-gap:150px;
-moz-column-gap:150px;
column-gap:150px;
-moz-column-rule:dashed 0.5em #60c;/*设置虚线大小*/
-webkit-column-rule:dashed 0.5em #60c;
-column-rule: 0.5em #60c;
}

效果图：
在这里插入图片描述 例2：

#test1 {
 border: 1px solid #930;
 line-height: 1.5em;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 4em;
  -moz-column-gap: 4em;
  column-gap: 4em;
 -moz-column-rule-style: inset;/*设置列之间规则的样式为inset小图*/
 -webkit-column-rule-style: inset;
 column-rule-style: inset;
 -moz-column-rule-width: 25px;/*设置列之间的宽度为25px*/
 -webkit-column-rule-width: 25px;
 column-rule-width: 25px;
 -moz-column-rule-color: #60C;/*设置列之间的颜色*/
 -webkit-column-rule-color: #60C;
 column-rule-color: #60C;
}
#test2 {
 border: 1px dotted #930;
 line-height: 1.5em;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
   -webkit-column-gap: 150px;
  -moz-column-gap: 150px;
  column-gap: 150px;
 -moz-column-rule-style: dotted;
 -webkit-column-rule-style: dotted;
 column-rule-style: dotted;
 -moz-column-rule-width: 1.5em;
 -webkit-column-rule-width: 1.5em;
 column-rule-width: 1.5em;
 -moz-column-rule-color: #F60;
 -webkit-column-rule-color: #F60;
 column-rule-color: #F60;
}

效果图：
在这里插入图片描述
完整案例如下：

<!doctype html>
<html>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
margin-top:30px;
padding:10;/*设置所有内边距属性*/
}
#text1{
border:1px solid #930;
line-height:1.5em;/*设置行高*/
/*em为一种测量单位，12点活字*/
-webkit-column-count:2;/*网站规定元素应该被分隔的列数为2*/
-moz-column-count:2;/*-column-count规定元素应该被分隔的列数*/
column-coumn:2;
-webkit-column-gap:4em;/*网站规定列之间的间隔*/
-moz-column-gap:4em;
column-gap:4em;/*规定列之间的间隔*/
-moz-column-rule:groove 10pt pink;/设置所有column-rule属性凹槽为10/
-webkit-column-rule:groove 10pt pink;
column-rule:groove 10pt pink;
}
#text2{
border:1px solid #930;
line-height:1.5em;
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;
-webkit-column-gap:150px;
-moz-column-gap:150px;
column-gap:150px;
-moz-column-rule:dashed 0.5em #60c;/*设置虚线大小*/
-webkit-column-rule:dashed 0.5em #60c;
-column-rule: 0.5em #60c;
}
</style>
</head>
<body>
<div id="text1">
从他接下来的一席话我摸清了金爷爷是一个富有爱心，正直大方的好人，默默地奉献着，不为人知，这种人往往是最少的。他从小就乐于助人，一直是干部，他会修家电，可不是专业学的，却是他自己推敲，在家里拆卸家电的成果，他说人不能只想着自己享受，而不顾别人死活。虽有古语：“各人子扫门前雪，莫管他人瓦上霜。”可是奉献爱心终究是传统美德。
</div>
<div id="text2">
墙的一边，静坐着一位老人，身着黑大褂，头戴黑帽，额间的皱纹条条可数，但他显得自信，慷慨。一见面，我友好讨教他是否介意我采访他，他摇摇头，一边帮我搬凳子；可见，每位老人都是很关心小一辈的人，这才是他们值得尊敬的地方。
</div>
</body>
</html>