CSS3Columns分列式布局详解.docxVIP

学IT技能上我学院网 CSS3 Columns 分列式布局详解 INCLUDEPICTURE \d /files/default/2016/07-145aa813342.JPG?6.17.19 \* MERGEFORMATINET  CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局。幸运的是，CSS3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。 CSS代码 CSS3里的column系列属性提供了各种不同的功能，通过组合使用它们，你能得到相应的任何分栏式布局： column-count: 列数目 column-gap: 各列之间间隙宽度 column-width: 建议宽度；未必会使用，浏览器基于此数值进行计算 column-rule-width：列之间分割线宽度 column-rule-style：列之间分割线风格 column-rule-color：列之间分割线演示 column-span: 允许一个元素的宽度跨越多列 column-fill: 分列方式 要想制作出一个漂亮的分列布局，你至少需要用到column-count和column-gap： /* 3 列，每列之间10px间距 */ ul.col-3 { column-count: 3; column-gap: 10px; } 如果你想美化一下列之间的空隙，这也很简单： /* 3 列，每列之间10px间距 ，带有金色的隔离线 */ ul.col-3 { column-count: 3; column-gap: 10px; column-rule: 1px solid #fc0; } 指定的元素还可以横跨多列： /* 以下面的HTML为例: div h3表头!/h3 div列 1/div div列 2/div div列 3/div div列 4/div div列 5/div div列 6/div div列 7/div div列 8/div div列 9/div div列 10/div div列 11/div div列 12/div /div */ div.col-3 { column-count: 3; column-gap: 5px; } div.col-3 h2 { column-span: all; text-align:center; background: #eee; } 非常的简单，而且显示结果完全符合我们的预期！ 使用CSS3的columns制作页面布局有很多优势：你不需要计算宽度，你不需要担心内容是否会撑破布局，这些数学问题系统都会帮你计算。还有一个，那就是清晰整洁的语义。