10-1 CSS3 多列布局——Columns
本节编程练习不计算学习进度，请电脑登录imooc.com操作

CSS3 多列布局——Columns

为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，庆幸的是，CSS3的多列布局可以轻松实现。接下来咱们一起学习多列布局相关的知识。

语法：

columns：<column-width> || <column-count>

多列布局columns属性参数主要就两个属性参数：列宽和列数。

参数

参数说明

<column-width>

主要用来定义多列中每列的宽度

<column-count>

主要用来定义多列中的列数

举例：要显示2栏显示，每栏宽度为200px，代码为：

columns: 200px 2;

到目前为止大部分主流浏览器都对其支持：

任务

在右侧CSS编辑器的第6-10行输入正确代码，将上例中两栏布局显示成三栏布局，每栏宽度为150px。注意每个浏览器的兼容性！

如下图所示：

温馨提示：案例相关效果要与上图一致，才算通过哦！否则请再看一下上面的知识点！

index.htmlstyle.css 
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>columns</title>
  6. <link href="style.css" rel="stylesheet" type="text/css">
  7. </head>
  8. <body>
  9. <div class="columns">
  10.   <h2>我要分列显示</h2>
  11.   <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>
  12.   <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>
  13. </div>
  14. </body>
  15. </html>
  1. .columns {
  2.   width: 500px;
  3.   padding: 5px;
  4.   border: 1px solid green;
  5.   margin: 20px auto; 
  6.   -webkit-columns: ?;
  7.   -moz-columns: ?;
  8.   -o-columns:?;
  9.   -ms-columns: ?;
  10.   columns: ?;
  11. }
下一节