关注我们

CSS3 - 多列布局

CSS3 可以将文本内容设计成像报纸一样的多列布局。

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

Sr.No.	Value & Remark
1	column-count 无涯教程网指定元素应该被分割的列数。
2	column-fill 指定如何填充列
3	column-gap 指定列与列之间的间隙
4	column-rule 所有 column-rule-* 属性的简写
5	rule-color 用于指定列规则颜色。
6	rule-style 指定两列间边框的样式链接：https://www.learnfk.comhttps://www.learnfk.com/css/css3-multi-columns.html 来源：LearnFk无涯教程网
7	rule-width 指定两列间边框的厚度
8	column-span 指定元素要跨越多少列

CSS3多列示例

复制代码

<html>
   <head>
      <style>
         .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;
            
            /* Column style property */
            -webkit-column-rule-style: solid; 
            -moz-column-rule-style: solid; 
            column-rule-style: solid;
         }
      </style>
   </head>

   <body>
   
      <div class="multi">
         Learnfk 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 Learnfk
         to our repository which now proudly flaunts a wealth of Learnfk and 
         allied articles on topics ranging from programming languages to web 
         designing to academics and much more.
      </div>
      
   </body>
</html>

它将产生以下输出-

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

.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;
}

它将产生以下输出-

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

OpenResty从入门到实战 -〔温铭〕

Elasticsearch核心技术与实战 -〔阮一鸣〕

基于人因的用户体验设计课 -〔刘石〕

操作系统实战45讲 -〔彭东〕

React Hooks 核心原理与实战 -〔王沛〕

Web漏洞挖掘实战 -〔王昊天〕

Go进阶 · 分布式爬虫实战 -〔郑建勋〕

B端体验设计入门课 -〔林远宏（汤圆）〕

AI绘画核心技术与实战 -〔南柯〕

好记忆不如烂笔头。留下您的足迹吧 :)