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

CSS3 多列布局——column-count

column-count属性主要用来给元素指定想要的列数和允许的最大列数。其语法规则：

column-count：auto | <integer>

取值说明：

属性值

属性值说明

auto

此值为column-count的默认值，表示元素只有一列，其主要依靠浏览器计算自动设置。

<integer>

此值为正整数值，主要用来定义元素的列数，取值为大于0的整数，负值无效。

 例如：将列分成四列显示，代码如下：

column-count:4;

任务

在CSS编辑器的第7行输入正确代码，让内容分成2列显示,注意浏览器的兼容性！如下图所示：

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

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