CSS3：几个例子带你读懂columns多列

白小宇

于 2017-12-21 18:10:05 发布

阅读量3.3k

点赞数

分类专栏： web前端 CSS 文章标签：多列 CSS3 columns

本文链接：https://blog.csdn.net/b954960630/article/details/78866404

版权

CSS3的多列布局特性提供了块状布局的扩展，便于创建类似报纸排版的多列文本展示。通过columns属性，开发者能轻松实现文本阅读的优化，避免过宽的行距导致的阅读困难。它有助于保持读者的注意力，提高阅读效率。

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

CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道，当一行文字太长时，读者读起来就比较费劲，有可能读错行或读串行；人们的视点从文本的一端移到另一端、然后换到下一行的行首，如果眼球移动浮动过大，他们的注意力就会减退，容易读不下去。所以，为了最大效率的使用大屏幕显示器，页面设计中需要限制文本的宽度，让文本按多列呈现，就像报纸上的新闻排版一样。

CSS3 columns 属性

 
 columns                           
 columns['kɒləm] 纵列 

参数	用法	描述
column-width	column-width:12em;	用来定义多列中每列的宽度
column-count

最低0.47元/天解锁文章