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 class="col-3">
- <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 制作页面布局有很多优势: 你不需要计算宽度, 你不需要担心内容是否会撑破布局, 这些数学问题系统都会帮你计算. 还有一个, 那就是清晰整洁的语义.
来源: http://www.webhek.com/post/css3-columns.html