CSS3 多列布局——Columns

最新推荐文章于 2024-09-30 15:56:28 发布

原创最新推荐文章于 2024-09-30 15:56:28 发布 · 413 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS3 多列布局Columns

CSS3 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了CSS3的多列布局模块，通过实例展示了如何使用columns属性创建类似报纸的多列排版。当元素的列宽和列数设置适当，浏览器会自动调整列的数量以适应容器宽度。内容中详细解释了不同列宽设置对布局的影响，包括列间距和布局自动调整的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>columns</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="columns"> 
  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生......此处省略几千个字</p>
</div>
</body>
</html>

CSS:

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

解析：由于CSS3多栏布局属性 columns 是根据元素所设置的列宽和列长所决定的，当元素不设置columns属性时，一列布局显示效果如下：

当为这个元素设置 columns:322px 3;这时候会出现三栏布局，效果图如下：

请注意！！如果此时给这个元素每一栏的宽度+1，也就是 columns:323px 3;这个时候会出现如下效果

323*3+16*2 >1000 ?? 因为在这边设置文本的字体大小为16px，当显示两栏布局时，两栏之间的间距gap其实就是一个字体大小。然而这边设置每一列的宽度是322px，有三栏布局，所以三栏之间有两个 16px 之间的间距，所以 322*3+16*2 < 1000 ,浏览器会计算变成三栏布局。如果此时给每一列的宽度设置为323px时，会发现 323*3+16*2 >1000 ,因为宽度已经超过了1000px了，所以浏览器会自动计算，只允许显示两列布局。