CSS3 如何在多栏中排列文本

CSS3 如何在多栏中排列文本

为了在多栏中排列文字,我们使用了CSS3的’Äúcolumn-count’Äù属性。列数属性用于将一个HTML元素的内容分成指定的列数。在这里,我们将使用两个不同的例子来演示CSS的colum count属性在2列和3列中的应用。

语法

column-count: n; 

这里,’Äún’Äù是正整数,代表我们要将文本排列成的列数。

例子1

在这个例子中,我们将通过使用CSS3的’Äúcolumn-count’Äù属性将一个’Äúp’Äù标签的内容排列成3列。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to arrange text in multi columns using CSS3?</title>
   <style>
      .para {
         column-count: 3;
      }
   </style>
</head>
<body>
   <h3>How to arrange text in multi columns using CSS3?</h3>
   <p class="para">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.</p>
</body>
</html>

示例2

在这个例子中,我们将通过使用CSS3的’Äúcolumn-count’Äù属性将一个’Äúp’Äù标签的内容排列成两列。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to arrange text in multi columns using CSS3?</title>
   <style>
      .para {
         column-count: 2;
      }
   </style>
</head>
<body>
   <h3>How to arrange text in multi columns using CSS3?</h3>
   <p class="para">
      <span>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.</span>
      <span>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.</span>
      <span>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.</span>
   </p>
</body>
</html>

总结

在这篇文章中,我们了解了什么是 “Äúcolumn-count’Äù “属性,以及如何使用它来将文本排列成多列的CSS3。在第一个例子中,我们将’Äúcolumn-count’Äù属性设置为3,将文本排成3列;在第二个例子中,我们将’Äúcolumn-count’Äù属性设置为2,将文本排成3列。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

CSS 教程