慕课网

CSS3 多列布局——column-width

column-width的使用和CSS中的width属性一样，不过不同的是，column-width属性在定义元素列宽的时候，既可以单独使用，也可以和多列属性中其他属性配合使用。其基本语法如下所示；

column-width: auto | <length>

取值说明

属性值	说明
auto	如果column-width设置值为auto或者没有显式的设置值时，元素多列的列宽将由其他属性来决定，比如前面的示例就是由列数column-count来决定。
<length>	使用固定值来设置元素列的宽度，其主要是由数值和长度单位组成，不过其值只能是正值，不能为负值。

任务

在编辑器的第7行输入正确代码，分为3栏，每栏的内容宽度设置为200px;（注：一定要考虑到浏览器的兼容性）具体效果见下图：

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

?不会了怎么办

index.html
style.css

<!doctype html> <html> <head> <meta charset="utf-8"> <title>columns-width</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="columns"> <h2>我要分列显示</h2> <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p> <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p> <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p> </div> </body> </html>

.columns { padding: 5px; border: 1px solid green; width: 900px; margin: 20px auto; ?200px; ?200px; ?200px; ?200px; ?200px; -webkit-column-count:3; -moz-column-count:3; -o-column-count:3; -ms-column-count:3; column-count:3; }

写笔记

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

10-2 CSS3...

CSS3 多列布局——column-width

任务

写笔记

收藏课程后，能更快找到我哦～