首页 > 代码库 > 第28章 CSS3多列布局
第28章 CSS3多列布局
第 28章 CSS3多列布局
学习要点：
1.早期多列问题
2.属性及版本
3.属性解释
本章主要探讨 HTML5中 CSS3提供的多列布局，通过多列布局我们方便的创建流体的
多列布局。
一．早期多列问题
我们有时想布局成报纸、杂志那样的多列方式（至少两列，一般三列以上），但早期
CSS提供的布局方式都有着极大的限制。如果是固体布局，那么使用浮动或定位布局都可以
完成。但对于流体的多列，比如三列以上，那只能使用浮动布局进行，而它又有极大的限制。
因为它是区块性的，对于动态的内容无法伸缩自适应，基本无能力。
//五段内容，分为三列
<div>
<p>我是第一段内容....省略的部分复制大量文本</p>
<p>我是第二段内容....省略的部分复制大量文本</p>
<p>我是第三段内容....省略的部分复制大量文本</p>
<p>我是第四段内容....省略的部分复制大量文本</p>
<p>我是第五段内容....省略的部分复制大量文本</p>
</div>
//带标题的五段内容，分为三列
<div>
<h4>第一段标题</h4>
<p>我是第一段内容....省略的部分复制大量文本</p>
<h4>第二段标题</h4>
<p>我是第二段内容....省略的部分复制大量文本</p>
<h4>第三段标题</h4>
<p>我是第三段内容....省略的部分复制大量文本</p>
<h4>第四段标题</h4>
<p>我是第四段内容....省略的部分复制大量文本</p>
<h4>第五段标题</h4>
<p>我是第五段内容....省略的部分复制大量文本</p>
</div>
上门两组内容，如果想用浮动和定位实现流体三列，基本不可能。并且实际应用中，需求可能多变，要更改成四列或者五列呢？所以，CSS3提供了多列布局属性 columns来实现
这个动态变换的功能。
二．属性及版本
CSS3提供了 columns多列布局属性等 7个属性集合，具体如下：
属性 说明
columns 集成 column-width和 column-count两个属性
column-width 定义每列列宽度
column-count 定义分分列列数
column-gap 定义列间距
column-rule 定义列边框
column-span 定义多列布局中子元素跨列效果，firefox不支持
column-fill 控制每列的列高效果，主流浏览器不支持
由于 column属性集尚未纳入标准，大多数浏览器必须使用厂商前缀才能访问，好在主
流的浏览器都可以很好的支持了。具体前缀内容查阅网站
通过上面的表格，我们可以了解到，要想让最新的浏览器全部实现效果，都必须使用前
缀。
//完整形式
-webkit-columns: 150px 4;
-moz-columns: 150px 4;
columns: border-box;
三．属性解释
为了方便演示，我们在 Firefox火狐浏览器测试，只用-moz-前缀演示。
1.columns
columns是一个复合属性，包含 columns-width和 columns-count这两种简写。意
为同时设置分列列数和分列宽度。
//分成四列，每列宽度自适应
-moz-columns: auto 4;
2.column-width
column-width属性，用于设置每列的宽度。
//设置列宽
-moz-column-width: 200px;
这里设置了 200px，有点最小宽度的意思。当浏览器缩放到小于 200大小时，将变成 1
列显示。而如果是 auto，则一直保持四列。
属性值
auto
说明
默认值，自适应。
设置列宽。
长度值
3.column-count
column-count属性，用于设置多少列。
//设置列数
-moz-column-count: 4;
属性值
说明
auto
默认值，表示就 1列。
数值
设置列数。
4.column-gap
column-gap属性，用于设置列间距
//设置列间距
-moz-column-gap: 100px;
属性值
auto
数值
说明
默认值，表示就 1列。
设置列数。
5.column-rule
column-rule属性，设置每列中间的分割线
//设置列边线
-moz-column-rule: 2px dashed gray;
属性 说明
column-rule <宽度> <样式> <颜色>的边框简写形式。
column-rule-width 单独设置边框宽度。
column-rule-style 单独设置边框的样式。
column-rule-color 单独设置边框的颜色。
列边线不会影响到布局，它会根据布局的缩放自我调整是否显示。如果我们把页面缩放
到只能显示一列时，它自动消失了。
6.column-span
column-span属性，设置跨列大标题。
//跨列标题，由于火狐尚未支持，固使用 webkit
-webkit-column-span: all;
属性值 说明
none 默认值，表示不跨列。
all 表示跨列。
例子
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>CSS3多列布局</title>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/style.css">
</head>
<body>
<div>
<h1>科技新闻总汇</h1>
<h3>第一段内容</h3>
<p>据市场研究机构IDC公布的最新数据，中国市场第一季度智能手机出货量较上年同比下滑4.3%，这在六年来尚属首次。其他的调查结果则显示，中国市场第一季度智能手机出货量仍处于增长，但其增幅较以往出现明显放慢。</p>
<h3>第二段内容</h3>
<p>据IDC的数据，今年第一季度，三星在华市场份额已经跌到第四，而一年前还位居第一。不过，三星还是对中国市场充满希望，希望通过其高端手机产品Galaxy S6继续赢得发展。三星在一份声明中称，“虽然有迹象表明爆发式增长的中国智能市场今年将降速，但8.85亿中国手机用户中的大部分还在使用中低端智能手机，因此即便中国市场出现饱和，但升级换代还是给高端手机留下相当大的空间。”</p>
<h3>第三段内容</h3>
<p>业内人士称，智能手机在中国市场的发展显著减速主要是受首次购买用户减少的影响。市场研究机构Counterpoint研究总监Tom Kang表示，在中国，智能手机的渗透率已经超过90%，这意味着在中国希望使用智能手机的用户都已经实现第一次购买，现在已经进入了一个手机换代升级的时期。</p>
<h3>第四段内容</h3>
<p>在北京一家科技公司工作的廖先生就属于这一人群。廖先生目前使用的是苹果iPhone 6，他几乎每两年更换一部手机。但从目前的情况来看，廖先生还是比较钟情于现在使用的iPhone 6。他说：“近期内不会再购买手机，除非现在的这部手机丢了或摔坏了。我以后可能还是会买苹果的手机，如果三星能推出一款不错的手机，我也会考虑的。”</p>
<h3>第五段内容</h3>
<p>中国市场发展速度的减速对苹果、三星等国外智能手机制造商以及小米等本土企业将产生实质性的影响。与此同时，不管是国外厂商还是本土企业，例如联想、酷派以及华为都在中国市场投入更多力量，其中很多还专注于销售价格不断上涨的大屏智能手机。</p>
</div>
</body>
</html>
@charset "utf-8";
div {
/*-moz-columns: auto 3;*/
/*-moz-columns: 150px 3;*/
/*如果没有设置列数，却设置了每列多少宽度，那么会自动设置列数*/
-moz-column-width: 150px;
-moz-column-count: 3;
-moz-column-gap: 50px;
-moz-column-rule: 2px dashed gray;
-webkit-column-width: 150px;
-webkit-column-count: 3;
-webkit-column-gap: 50px;
-webkit-column-rule: 2px dashed gray;
column-width: 150px;
column-count: 3;
column-gap: 50px;
column-rule: 2px dashed gray;
}
h1 {
text-align: center;
-moz-column-span: all;
-webkit-column-span: all;
column-span: all;
}
第28章 CSS3多列布局