css3多列布局（分栏布局）

css3多列布局（分栏布局）

多列布局（分栏布局）相关属性：

1.column-width：栏目宽度，建议一个最佳列宽。
2.column-count：栏目列数，指定要多少栏。
3.column-gap：栏目距离。
4.column-rule：栏目间隔线，跟border的参数一样。

注意：column-width和column-count不能同时使用，同时使用跟样式的先后顺序没有关系，会根据‘取大优先’的原则，应用column-width的样式，还是column-count的样式。

演示模板HTML代码：

  <div id="box">
	多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，<br>
	多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，<br>
	多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，<br>
	多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，<br>
	多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，<br>
	多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，<br>
	多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，<br>
	多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，<br>
	多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，<br>
	多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，<br>
	多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，<br>
	多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，<br>
	多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，<br>
	多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，<br>
	多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，<br>
	多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，<br>
	多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，多列布局，<br>

1. column-width：栏目宽度，建议一个最佳列宽：

	#box{
	  width:800px;
	  height:400px;
	  border:1px solid;
	  margin:100px auto;
	  column-width:200px;
	}

页面效果：

我们可以看见整个div的宽度是800px；设置一列的宽度为200px；那么应该有4列才对，为什么只有3列呢？
因为列与列之间存在间隙，如果是4列，整个的宽度就是4*200px+每个间隙的距离，这样得出的结果肯定大于800px，所以这里设置200px只有3列。

2. column-count：栏目列数，指定要多少栏：

	#box{
	  width:800px;
	  height:400px;
	  border:1px solid;
	  margin:100px auto;
	  column-count:5
	}

页面效果：

可以看见设置column-count为多少，文本就会分成多少列。

3. column-gap：栏目距离：

	#box{
	  width:800px;
	  height:400px;
	  border:1px solid;
	  margin:100px auto;
	  column-count:3;
	  column-gap:60px;
	}

页面效果：

可以看见每列之间的间隙比起之前宽了很多。

4. column-rule：栏目间隔线，跟border的参数一样：

	#box{
	  width:800px;
	  height:400px;
	  border:1px solid;
	  margin:100px auto;
	  column-count:3;
	  column-gap:60px;
	  column-rule:2px solid blue;
	}

页面效果：

可以看见每列之间都有一条分隔线将文本分隔开来，方便查看。

5. column-width和column-count同时使用的情况：

	#box{
	  width:800px;
	  height:400px;
	  border:1px solid;
	  margin:100px auto;
	  column-count:3;
	  column-width:300px;
	  column-gap:60px;
	  column-rule:2px solid blue;
	}

页面效果：

可以看见这时元素应用的是column-width的样式，没应用column-count的样式，我们把两种样式的顺序换下：

	#box{
	  width:800px;
	  height:400px;
	  border:1px solid;
	  margin:100px auto;
	  column-width:300px;
	  column-count:3;
	  column-gap:60px;
	  column-rule:2px solid blue;
	}

页面效果：

可以看见跟上面的效果是一样的，这也说明column-width和column-count同时使用的时候，元素应用的效果跟这两者的顺序没有关系。

我们把column-width调小一点：

	#box{
	  width:800px;
	  height:400px;
	  border:1px solid;
	  margin:100px auto;
	  column-width:100px;
	  column-count:3;
	  column-gap:60px;
	  column-rule:2px solid blue;
	}

页面效果：

可以看见这次应用的是column-count的样式，这是为什么呢？

原来当column-width和column-count同时使用的时候，采用的是‘取大优先’的原则，就是哪个样式生成的列的列宽最大，就应用哪个的样式。

我们再来验证下：

	#box{
	  width:800px;
	  height:400px;
	  border:1px solid;
	  margin:100px auto;
	  column-width:800px;
	  column-count:3;
	  column-gap:60px;
	  column-rule:2px solid blue;
	}

column-width:800px，column-count:3，可以肯定column-width只有一列，column-count有3列，那么column-width的列宽肯定大于column-count的列宽，所以会应用column-width的样式，我们来看看是否是这样的：

果然没错！！！