什么是CSS3 Columns分列式布局

这篇文章主要介绍“什么是CSS3 Columns分列式布局”，在日常操作中，相信很多人在什么是CSS3 Columns分列式布局问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”什么是CSS3 Columns分列式布局”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

幸运的是，CSS3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。

CSS代码

CSS3里的column系列属性提供了各种不同的功能，通过组合使用它们，你能得到相应的任何分栏式布局：

1.column-count: 列数目
 2.column-gap: 各列之间间隙宽度
 3.column-width: 建议宽度；未必会使用，浏览器基于此数值进行计算
 4.column-rule-width：列之间分割线宽度
 5.column-rule-style：列之间分割线风格
 6.column-rule-color：列之间分割线演示
 7.column-span: 允许一个元素的宽度跨越多列
 8.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为例:</p> <p><div class="col-3 lazy ">
 <h4>表头!</h4>
 <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></p> <p> */
 div.col-3 {
 column-count: 3;
 column-gap: 5px;
 }</p> <p>div.col-3 h3 {
 column-span: all;
 text-align:center;
 background: #eee;
 }

 非常的简单，而且显示结果完全符合我们的预期！

使用CSS3的columns制作页面布局有很多优势：你不需要计算宽度，你不需要担心内容是否会撑破布局，这些数学问题系统都会帮你计算。还有一个，那就是清晰整洁的语义。

到此，关于“什么是CSS3 Columns分列式布局”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！