10-6 CSS3 跨列设置column-span
本节编程练习不计算学习进度,请电脑登录imooc.com操作

CSS3 跨列设置column-span

column-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列,不管里面元素如何排放顺序,他们都是从左向右的放置内容,但有时我们需要基中一段内容或一个标题不进行分列,也就是横跨所有列,此时column-span就可以轻松实现,此属性的语法如下。

column-span: none | all

取值说明

属性值

属性值说明

none

此值为column-span的默认值,表示不跨越任何列。

all

这个值跟none值刚好相反,表示的是元素跨越所有列,并定位在列的Z轴之上。

例如:将第一个标题跨越所有列,代码:

column-span:all;

效果如下:

任务

在编辑器第33-37行输入正确代码,让所有偶数段落和标题,跨越所有列,注意浏览器的兼容性设置。补全代码后效果如下:

温馨提示:案例的效果如上图所示才算顺利通关,否则请再学习一遍本节的知识点!

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>跨列设置column-span</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. <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。它主要应用在文本的多列布局方面。对于文本的多列布局,我想大家并不陌生,因为报纸和杂志上我们随处可见,这种布局在报纸和杂志上都使用了几十年了,但需要在Web页面上实现文本的多列布局,正如下图所示。</p>
  15. <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。它主要应用在文本的多列布局方面。对于文本的多列布局,我想大家并不陌生,因为报纸和杂志上我们随处可见,这种布局在报纸和杂志上都使用了几十年了,但需要在Web页面上实现文本的多列布局,正如下图所示。</p>
  16. <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。它主要应用在文本的多列布局方面。对于文本的多列布局,我想大家并不陌生,因为报纸和杂志上我们随处可见,这种布局在报纸和杂志上都使用了几十年了,但需要在Web页面上实现文本的多列布局,正如下图所示。</p>
  17. </div>
  18. </body>
  19. </html>
  1. .columns {
  2. padding: 5px;
  3. border: 1px solid green;
  4. width: 900px;
  5. margin: 20px auto;
  6.  
  7. -webkit-column-count:3;
  8. -moz-column-count:3;
  9. -o-column-count:3;
  10. -ms-column-count:3;
  11. column-count:3;
  12.  
  13. -webkit-column-gap: 2em;
  14. -moz-column-gap: 2em;
  15. -o-column-gap: 2em;
  16. -ms-column-gap: 2em;
  17. column-gap: 2em;
  18.  
  19. -webkit-column-rule: 3px gray solid;
  20. -moz-column-rule: 3px gray solid;
  21. -o-column-rule: 3px gray solid;
  22. -ms-column-rule: 3px gray solid;
  23. column-rule: 3px gray solid;
  24. }
  25. h2{
  26. background: green;
  27. padding: 10px;
  28. color: #fff;
  29. }
  30.  
  31. h2,
  32. p:nth-child(2n){
  33. -webkit-?;
  34. -moz-?;
  35. -o-?;
  36. -ms-?;
  37. ;
  38. }
下一节