55. CSS3 多列布局之Columns属性

为了能在 Web 页面中方便实现类似报纸、杂志那种多列排版的布局，W3C 特意给 CSS3 增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在 Web 页面上实现这样的效果还是有相当大的难度，庆幸的是，CSS3 的多列布局可以轻松实现。接下来咱们一起学习多列布局相关的知识。

语法：

columns：<column-width> || <column-count>

多列布局columns属性参数主要就两个属性参数：列宽和列数。

举例：要显示 2 栏显示，每栏宽度为 200px，代码为：

columns: 200px 2;

到目前为止大部分主流浏览器都对其支持：

实例演示：

将文本显示成三栏布局，每栏宽度为 150px。注意每个浏览器的兼容性！

HTML 代码：

<div class="columns">
  <h2>我要分列显示</h2>
  <p>为了能在 Web 页面中方便实现类似报纸、杂志那种多列排版的布局，W3C 特意给 CSS3 增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在 Web 页面上实现文本的多列布局，正如下图所示。</p>
  <p>为了能在 Web 页面中方便实现类似报纸、杂志那种多列排版的布局，W3C 特意给 CSS3 增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在 Web 页面上实现文本的多列布局，正如下图所示。</p>
</div>

CSS 代码：

.columns {
  width: 500px;
  padding: 5px;
  border: 1px solid green;
  margin: 20px auto; 
  -webkit-columns: 150px 3;
  -moz-columns:150px 3;
  -o-columns:150px 3;
  -ms-columns: 150px 3;
  columns: 150px 3;
}

效果如下：

以上关于55. CSS3 多列布局之Columns属性的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。