📌  相关文章
📜  CSS3-多列

📅  最后修改于: 2020-10-26 05:00:09             🧑  作者: Mango

CSS3支持多列以将文本排列为新闻纸结构。

一些最常用的多列属性，如下所示-

Sr.No. Value & Description
1

column-count

Used to count the number of columns that element should be divided.
2

column-fill

Used to decide, how to fill the columns.
3

column-gap

Used to decide the gap between the columns.
4

column-rule

Used to specifies the number of rules.
5

rule-color

Used to specifies the column rule color.
6

rule-style

Used to specifies the style rule for column.
7

rule-width

Used to specifies the width.
8

column-span

Used to specifies the span between columns.

例

下例显示了文本作为新纸张结构的排列方式。

现场演示

   

   
   
      

         Tutorials Point originated from the idea that there exists a class 
         of readers who respond better to online content and prefer to learn 
         new skills at their own pace from the comforts of their drawing rooms.
         The journey commenced with a single tutorial on HTML in 2006 and elated 
         by the response it generated, we worked our way to adding fresh tutorials
         to our repository which now proudly flaunts a wealth of tutorials and 
         allied articles on topics ranging from programming languages to web 
         designing to academics and much more.

它将产生以下结果-

假设，如果用户希望将文本制成没有行的新纸，我们可以通过删除样式语法来做到这一点，如下所示-

.multi {
   /* Column count property */
   -webkit-column-count: 4;
   -moz-column-count: 4;
   column-count: 4;
   
   /* Column gap property */
   -webkit-column-gap: 40px; 
   -moz-column-gap: 40px; 
   column-gap: 40px;
}

它将产生以下结果-