小侃CSS3——多列布局

为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面，这种布局在报纸和杂志上使用了几十年，但要在Web页面上实现这样的效果还是需要一些技巧的，庆幸的是，CSS3的时代来了~~~~多列布局可以轻松实现。我们来看一下具体的情况。

看看MDN的解释

喔吼吼~听到他怎么说是不是感觉大块人心呢~

要注意的一点是

上个代码先看看好了
大概就是这个样子的，注意一下，如果你的宽度设置的太过于宽然后你的文字达不到一定数量级的话，你设置的栏数也会完美的呈现出来喔~只不过高度不限死的话它就会从高度上面给你做手脚给你呈现四栏。

但是！！！！

但是！！！！

但是1！！！

如果你文字十分稀少的话，你看看，它为了执行你的要求他也会强行四栏，我们可以看的出他的高度会让给最高的列，然后再根据要求来进行分栏，到最后字数不够还是会给你分出来不过是用空白来占位。

不知道当你看到这种布局的时候，有没有心头突然有种悸动的感觉。这种布局明明以前就要写一些其他的样式来实现啊。可是现在，就是现在，我们已经可以简简单单通过CSS3的这一个属性来实现了啊！

我们首先来看看下面这个属性表

这样 看可能会比较正式，我们换个法子来看看

• 列数和列宽：columns、column-count、column-width
• 列的间距和分列样式：column-gap、column-rule-color、column-rule-style、column-rule-width、column-rule
• 跨越列：column-span
• 填充列：column-fill
• 分栏符：column-break-before、column-break-after、column-break-inside

这样大家应该可以一目明了了吧~

按照步骤肯定要讲下语法

columns
[v_act]columns: <column-count> <column-width>[/v_act]

这个是一个复合样式，包含了column-count和column-width。

column-count：有多少列

column-width：每一列有多宽

看看兼容性，虽然绿油油但是感觉还是不够啊。尚且需要加油的样子！！！

column-gap & column-rule

[v_act]column-gap: normal || length;[/v_act]

[v_act]column-rule: <column-rule-width> || <column-rule-style> || <column-rule-color>;[/v_act]

这两个样式我想一起讲，因为是修饰类的。看个图就知道是什么了。

简直一目了然。通过这张图你是不是瞬间又清楚了这个属性的使用方法和效果呢？

其实呢，这里还有个小秘密不知道大家发现没有。就是~~~~~~看图~~~

看到了吗~rule-width增大不会霸占空间~

column-span

[v_act]column-span: none || all;[/v_act]

小舅子打灯笼---照旧、一图胜千言

这里给我的感觉有点像bootstrap的栅格化系统然后给了col-md-12的感觉，然后选择还只有占满和不占的选择，目前至少来说算是一个进步吧。

还有一些选项没有讲主要是感觉用处不大，待到感觉有奇特的地方的时候再做研究吧~

我的博客：http://zengjinchao.com/wordpress/