
为了将文本分成多列,我们使用CSS3的“column-count”属性。该属性用于将HTML元素的内容分成指定数量的列。在这里,我们将使用两个不同的示例来演示CSS的“column count”属性在2列和3列中排列文本的应用。
语法
column-count: n;
在这里,“n”是一个正整数,表示我们希望将文本排列成的列数。
Example 1
的中文翻译为:示例 1
在这个例子中,我们将使用CSS3的“column-count”属性将“p”标签的内容分成3列。
How to arrange text in multi columns using CSS3? How to arrange text in multi columns using CSS3?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil architecto ratione cumque consequatur at fugit saepe, unde temporibus laudantium, incidunt sit possimus quidem soluta facere repellat dolore facilis, consectetur repudiandae.
Example 2
的中文翻译为:示例2
在这个例子中,我们将使用CSS3的“column-count”属性将“p”标签的内容分为两列。
一套面向小企业用户的企业网站程序!功能简单,操作简单。实现了小企业网站的很多实用的功能,如文章新闻模块、图片展示、产品列表以及小型的下载功能,还同时增加了邮件订阅等相应模块。公告,友情链接等这些通用功能本程序也同样都集成了!同时本程序引入了模块功能,只要在系统默认模板上创建模块,可以在任何一个语言环境(或任意风格)的适当位置进行使用!
立即学习“前端免费学习笔记(深入)”;
How to arrange text in multi columns using CSS3? How to arrange text in multi columns using CSS3?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil architecto ratione cumque consequatur at fugit saepe, unde temporibus laudantium, incidunt sit possimus quidem soluta facere repellat dolore facilis, consectetur repudiandae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil architecto ratione cumque consequatur at fugit saepe, unde temporibus laudantium, incidunt sit possimus quidem soluta facere repellat dolore facilis, consectetur repudiandae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil architecto ratione cumque consequatur at fugit saepe, unde temporibus laudantium, incidunt sit possimus quidem soluta facere repellat dolore facilis, consectetur repudiandae.
结论
在这篇文章中,我们学习了“column-count”属性是什么,以及如何使用CSS3将文本排列成多列。在第一个示例中,我们通过将“column-count”属性设置为3来将文本排列成3列,在第二个示例中,我们通过将“column-count”属性设置为2来将文本排列成3列。









