CSS3 Columns分列式布局方法简介
发布时间：2014-05-03 20:30:21 作者：佚名 
我要评论
我要评论CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
幸运的是，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 ">
<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></p> <p> */
div.col-3 {
column-count: 3;
column-gap: 5px;
}</p> <p>div.col-3 h2 {
column-span: all;
text-align:center;
background: #eee;
}
非常的简单，而且显示结果完全符合我们的预期！
使用CSS3的columns制作页面布局有很多优势：你不需要计算宽度，你不需要担心内容是否会撑破布局，这些数学问题系统都会帮你计算。还有一个，那就是清晰整洁的语义。
相关文章
这篇文章主要介绍了CSS columns实现两端对齐布局效果,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-05-28
浅谈CSS 多栏布局（Multi-Columns Layout）
这篇文章主要介绍了浅谈CSS 多栏布局（Multi-Columns Layout）的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-20
最新评论