資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究使用 CSS 建立列布局
Web 開發人員可以透過利用 CSS 建立列布局來以視覺上美觀的方式組織和構建內容。開發人員可以使用column-count屬性定義列數，而column-gap屬性則控制列之間的距離。這種技術最大化利用可用空間並提高可讀性，尤其是在包含大量文字的網頁中。
透過使用 CSS 規則，可以建立響應式且靈活的佈局，該佈局可以輕鬆適應不同的螢幕尺寸，並在各種裝置上提供一致的使用者體驗。熟練掌握列布局可以提高網站的整體可用性和外觀，使其設計更加精緻和專業。
示例
讓我們來看下面的例子，我們將使用 column-count 屬性並指定列數。
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
column-count: 2;
color: #DE3163;
font-family: verdana;
font-size: 15px;
background-color: #D5F5E3;
}
</style>
</head>
<body>
<div class="tutorial"> 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. </div>
</body>
</html>
當我們執行以上程式碼時，它將生成一個輸出，該輸出包含在網頁上顯示的分為兩列的文字。
示例
考慮另一種情況，我們將使用 column-width 屬性來指定最佳寬度。
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
column-width: 80px;
font-family: verdana;
font-size: 12px;
color: #DE3163;
}
</style>
</head>
<body style="background-color:#E8DAEF">
<div class="tutorial"> Our Text Library Content and resources are freely available and we prefer to keep it that way to encourage our readers acquire as many skills as they would like to. We don't force our readers to sign up with us or submit their details either to use our Free Text Tutorials Library. No preconditions and no impediments, Just Simply Easy Learning! We have established a Digital Content Marketplace to sell Video Courses and eBooks at a very nominal cost. You will have to register with us to avail these premium services. </div>
</body>
</html>
執行以上程式碼後，將彈出輸出視窗，在網頁上顯示帶有列寬度的文字。
示例
在下面的示例中，我們將使用 column-rule-width 屬性來指定列之間的規則。
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
font-family: verdana;
color: #DE3163;
background-color: #D6EAF8;
column-count: 2;
column-gap: 50px;
column-rule-style: solid;
column-rule-width: 2px
}
</style>
</head>
<body>
<div class="tutorial"> MS Dhoni probably ranks as the third-most popular Indian cricketer ever, behind only Sachin Tendulkar and Virat Kohli. He emerged from a cricketing backwater, the eastern Indian state of Jharkhand, and made it to the top with a home-made batting and wicketkeeping technique, and a style of captaincy that scaled the highs and hit the lows of both conservatism and unorthodoxy. Under Dhoni's leadership, India won the top prize in all formats: leading the Test rankings for 18 months starting December 2009, winning the 50-over World Cup in 2011, and the T20 world title on his captaincy debut in 2007. </div>
</body>
</html>
當我們執行以上程式碼時，它將生成一個輸出，該輸出包含在網頁上顯示的分為多列的文字。
更新於: 2024年1月8日
248 次檢視
廣告