开发者学堂课程【前端开发CSS基础：CSS 多列 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/361/detail/4271
CSS 多列
内容简介：
一、多列
二、代码演示
一、 多列
演示例子：
比如以下这个页面采用的时图文混合的方式，即图片在一侧，文字站在了另一侧，这时候采用之前学习的方式来布局的话就比较困难， 但如果采用多列的方式来布局就非常简单。
在 CSS3 中，可以创建多列来对文本或者多列来进行布局。
属性 |
描述 |
columns |
设置或检索对象的列数和每列的宽度。复合属性 |
column-width |
每列的宽度 |
column-count |
列数 |
column-gap |
列与列之间的间隙 |
column-rule |
列与列之间的边框。复合属性 |
column-rule-width |
列与列之间的边框厚度 |
column-rule-style |
列与列之间的边框样式 |
column-rule-color |
列与列之间的边框颜色 |
二、代码演示
创建一个新的 HTML 文件，并命名为 layout
（1）写一个关于图片与文字同时显示的代码
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
< img src="pic.png" width=”300px” />
在开场独白中洛克说，本次奥斯卡的计票工作由普华永道会计师事务所负责。随后，他介绍该事务所三位“最专注、最精确和最勤奋“的会计上台。他说这三名会计叫“明珠”、“宝玲“ 和”戴维莫斯科维茨“。
</div>
<div class="two">
< img src="pic.png" width=”300px” />
在开场独白中，洛克说，本次奥斯卡的计票工作由普华永道会计师事务所负责。随后，他介绍该事务所三位“最专注、最精确和最勤奋“的会计上台。他说，这三名会计叫“明珠”、“宝玲“ 和”戴维莫斯科维茨“。
</div>
</div>
</body>
</html>
运行上述代码会得到以下效果：
可以观察到这样的书写方式是不够美观的，所以需要对代码进一步修改成三列来在浏览器上显示。
（2）修改成三行来在浏览器上显示
此时，需要对外层的 div 的容器进行修改即可
<style>
container{
column-count:3;
}
</div>
</div>
</body>
</html>
运行上述代码会得到以下效果：
修改之后，发现并没有变化，这是因为每个浏览器对 CSS3 的支持效果是不一样的，所以需要根据不同的浏览器，来选择不同的内核
内容重温：内核
1. webkit : chrome Safari 360
2. IE: ms
3. Opera : o
4. Firefox: moz
由于在这里使用的是 chrome ，所以在前面添加 chrome 即可，即
<style>
container{
-webkit-column-count:3;
}
</div>
<div class="two">
< img src="pic.png" width=”300px” />
在开场独白中，洛克说，本次奥斯卡的计票工作由普华永道会计师事务所负责。随后，他介绍该事务所三位“最专注、最精确和最勤奋“的会计上台。他说，这三名会计叫“明珠”、“宝玲“ 和”戴维莫斯科维茨“。随后，三名穿着黑色套装，手提公文包的孩子上场，一水的亚裔面孔。。
</div>
<div class="three">
< img src="pic.png" width=”300px” />
</div>
</div>
</body>
</html>
运行上述代码会得到以下效果：
将代码的 -webkit-column-width ：300px 在改为 500px 后，又会有另一种效果
同时，也可以将以下代码合成为一行，效果相同
.container{
-webkit-column-count:3;
-webkit-column-width:300px;
}
合成后：
.container{
-webkit-columns :3 500px;
}
(3) column-gap 代码演示
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
在开场独白中，洛克说，本次奥斯卡的计票工作由普华永道会计师事务所负责。随后，他介绍该事务所三位“最专注、最精确和最勤奋“的会计上台。他说，这三名会计叫“明珠”、“宝玲“ 和”戴维莫斯科维茨“。
</div>
<div class="two">
< img src="pic.png" width=”300px” />
</div>
<div class="three">
< img src="pic.png" width=”300px” />
</div>
</body>
</html>
运行上述代码会得到以下效果：
可以观察到列与列之间的间隙为 50px;
(4) column-rule 代码演示
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
container{
-webkit-column-count:3; /* -webkit-column-width:300px;*/
/*-webkit-columns :3 500px;*/
<style>
</head>
<body>
<div class="container" >
<div class="one">
< img src="pic.png" width=”300px” />
<div class="two">
< img src="pic.png" width=”300px” />
在开场独白中，洛克说，本次奥斯卡的计票工作由普华永道会计师事务所负责。随后，他介绍该事务所三位“最专注、最精确和最勤奋“的会计上台。他说，这三名会计叫“明珠”、“宝玲“ 和”戴维莫斯科维茨“。
</div>
<div class="three">
< img src="pic.png" width=”300px” />
在开场独白中，洛克说，本次奥斯卡的计票工作由普华永道会计师事务所负责。随后，他介绍该事务所三位“最专注、最精确和最勤奋“的会计上台。他说，这三名会计叫“明珠”、“宝玲“ 和”戴维莫斯科维茨“。
</div>
/div>
</body>
</html>
运行上述代码会得到以下效果：
可以看到一个红色的边框线；
注意：
-webkit-column-width:5px;
-webkit-column-rule-style: solid;
-webkit-column-rule-color:red;
这三条语句可以转化为一条语句，两个的效果是一样的，转化之后变为：
-webkit-column-rule:5px solid red;
