32、CSS3 多列

通过 CSS3的多列，您能够创建多个列来对文本进行布局，就像报纸那样！

  • column-count ——————规定元素应该被分隔的列数。
  • column-fill ——————— 规定如何填充列。
  • column-gap —————— 规定列之间的间隔。
  • column-rule ——————设置所有 column-rule-* 属性的简写属性。
  • column-rule-color ——— 规定列之间规则的颜色。
  • column-rule-style ——— 规定列之间规则的样式。
  • column-rule-width ——— 规定列之间规则的宽度。
  • column-span ————— 规定元素应该横跨的列数。
  • column-width ————— 规定列的宽度。
  • columns ——————— 规定设置 column-width 和 column-count 的简写属性。

例：

<html>
<head>
<style>
div { 
  width: 500px; color: #009;
  margin: auto;
  border: 1px solid #66c;
  columns: 2;
  column-gap: 20px; 
  column-rule: 1px solid #ccc;
}
</style>
</head>
<body>
<div>
学习小组任务<br>
1、做一个网页，只需一页，内容任意。基本要求：要有布局，一个网页分成若干块，每一块里面都要基本放满内容。友情提示：如果中间一块没很合适的内容放，建议放一个课程表。<br>
2、***访问Facebook、YouTube、twitter、Google+，在Facebook和Google+中互相加一下好友，在我的Google文档中签名。<br>
3、在网页上显示一行欢迎词，格式为：“晚上好！今天是2012年5月8日，星期二，现在的时间是20:05。欢迎访问本网站。”<br>
4、到 http://sae.sina.com.cn/ 注册一个号，建立一个主页，把网页练习传上去。
</div>
</body>
</html>

生成网页效果（chrome浏览器）如下：
图片说明
columns: 2;——————————— 表示文字将被分为两列显示。
column-gap: 20px;———————— 表示列之间的间隔为20px。
column-rule: 1px solid #ccc; ————表示列之间规则的宽度为1px的灰色实线。