CSS3 多列布局——Columns
03/25
为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，庆幸的是，CSS3的多列布局可以轻松实现。接下来咱们一起学习多列布局相关的知识。
语法：
columns：<column-width> || <column-count>
多列布局columns属性参数主要就两个属性参数：列宽和列数。
参数 | 参数说明 |
<column-width> | 主要用来定义多列中每列的宽度 |
<column-count> | 主要用来定义多列中的列数 |
举例：要显示2栏显示，每栏宽度为200px，代码为：
columns: 200px 2;
到目前为止大部分主流浏览器都对其支持：
例如：布局显示成三栏布局，每栏宽度为150px。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>columns</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style>
.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;
}
</style>
</head>
<body>
<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>
</body>
</html>
效果图如下：
版权属于：
Dcr163的博客
本文链接：
https://www.dcr163.cn/155.html（转载时请注明本文出处及文章链接）
