数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学使用HTML实现文本流的多列布局
在HTML中，<multicol>标签用于创建多列布局。它有开始和结束标签，<multicol> </multicol>。以下是multicol标签的语法。
<multicol> …….. </multicol>
<multicol>标签的属性
以下是<multicol>标签中使用的属性：
cols
col属性的值是数字，它指定需要使用的列数。以下是multicol标签中cols属性的语法。
<multicol cols=3>
gutter
gutter属性的值是px，它以像素为单位指定每列之间的距离。以下是<multicol>标签中gutter属性的语法。
<multicol cols=3 gutter=10>
width
width属性的值是px，它指定列的宽度。以下是<multicol>标签中width属性的语法。
<multicol cols=3 width=”40%”>
示例
在下面的示例中，我们尝试使用HTML创建文本流的多列布局：
<!DOCTYPE html>
<html>
<body>
<h2>HTML Tutorial</h2>
<multicol cols=3>
<p>HTML stands as Hyper Text Markup Language.</p>
</multicol>
</body>
</html>
注意 - <multicol>标签已弃用，不再推荐使用。要创建多列布局，我们使用HTML中的DIV标签，如下所示。
<!DOCTYPE html>
<html>
<head>
<style>
.sample {
column-count: 4;
column-gap: 10px;
column-rule: 5px solid blue;
}
</style>
</head>
<body>
<h1> HTML Tutorial</h1>
<div class="sample"> HTML Stands as Hyper Text Markup Language. HTML Stands as Hyper Text Markup Language. HTML Stands as Hyper Text Markup Language. HTML Stands as Hyper Text Markup Language. HTML Stands as Hyper Text Markup Language. HTML Stands as Hyper Text Markup Language. </div>
</body>
</html>
CSS多列布局
网页中有多种CSS属性可以实现多列排列，如果我们考虑报纸，文本的排列形式就是多列布局。不同的列属性如下所示：
column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width
示例
以下示例演示如何使用CSS属性创建文本的多列布局：
<!DOCTYPE html>
<html>
<head>
<title>Muli-column property</title>
<style>
.content {
-webkit-column-span: 4;
column-span: 4;
-moz-column-count: 4;
column-count: 4;
padding-top: 35px;
-webkit-column-gap: 50px;
-moz-column-gap: 50px;
column-gap: 50px;
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
-webkit-column-rule-width: 10px;
-moz-column-rule-width: 10px;
column-rule-width: 10px;
width: 100%;
text-align: justify;
-webkit-column-rule-color: blue;
-moz-column-rule-color: blue;
column-rule-color: blue;
}
.TP {
text-align: center;
font-size: 40px;
font-weight: bold;
color: red;
}
.tutorial {
text-align: center;
}
</style>
</head>
<body>
<div class="TP">TutorialsPoint</div>
<div class="tutorial">A Leading Edutech Company</div>
<div class="content"> Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects. Tutorials Point India Private Limited, 4th Floor Incor9 Building, Kavuri Hills, Madhapur, Hyderabad, Telangana - 500081, INDIA </div>
</body>
</html>
更新于：2023年10月10日
2K+ 次浏览
广告