資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
廣告