Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies使用 CSS3 設定列計數或寬度
使用 CSS3 中的 columns 屬性來設定列計數和寬度。它是 column-width 和 column-count 屬性的簡寫屬性。使用它，你還可以單獨設定這兩個屬性。
column 屬性
column 屬性用作 column-with 和 column-count 屬性的簡寫屬性。以下是語法 −
columns: auto|column-width column-count|initial|inherit;
示例
讓我們看一個示例來設定 columns 屬性。它將列寬度和計數都設定為 auto 值 −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
-webkit-columns: auto auto; /* Chrome, Safari, Opera */
-moz-columns: auto auto; /* Firefox */
columns: auto auto;
}
</style>
</head>
<body>
<h1>Machine Learning</h1>
<div class="demo">
Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing. This is due to the fact that huge computing resources are easily available to the common man. The developers now take advantage of this in creating new Machine Learning models and to re-train the existing models for better performance and results. The easy availability of High Performance Computing (HPC) has resulted in a sudden increased demand for IT professionals having Machine Learning skills.
</div>
</body>
</html>
示例
現在讓我們看另一個示例。在這裡，我們將 column-count 設定為 3，寬度設定為 40px −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
-webkit-columns: 40px 3; /* Chrome, Safari, Opera */
-moz-columns: 40px 3; /* Firefox */
columns: 40px 3;
}
</style>
</head>
<body>
<h1>Machine Learning</h1>
<div class="demo">
Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing. This is due to the fact that huge computing resources are easily available to the common man. The developers now take advantage of this in creating new Machine Learning models and to re-train the existing models for better performance and results. The easy availability of High Performance Computing (HPC) has resulted in a sudden increased demand for IT professionals having Machine Learning skills.
</div>
</body>
</html>
column count 屬性
若要設定列計數，請使用 column-count 屬性 −
.demo {
column-count: 4;
}
示例
讓我們看一個示例 −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 4;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div class="demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse condimentum bibendum mi, nec scelerisque erat porta vitae. Nulla efficitur laoreet mauris, vel commodo risus tincidunt eu. Praesent et accumsan nisl. Sed quis finibus tortor, vitae pellentesque dui. Donec auctor libero libero, vitae vestibulum nibh condimentum at. Nam diam ipsum, rhoncus sed ultricies at, suscipit eget metus. Integer in ligula a velit congue semper et eu nisi. Mauris semper arcu sed nisl porta tincidunt.
Cras lobortis imperdiet ultrices. Curabitur dictum vestibulum condimentum. Cras tincidunt pellentesque felis ultricies elementum. Quisque nibh magna, vehicula in volutpat ac, posuere feugiat libero. Fusce dapibus nunc eget odio scelerisque, eu pulvinar magna suscipit. Donec venenatis semper hendrerit. Cras mattis sodales viverra. Phasellus volutpat leo odio, id interdum libero venenatis quis. Nunc nec quam arcu. Cras pellentesque, felis vel suscipit sollicitudin, orci sapien placerat quam, vitae pretium purus leo id erat. Praesent blandit urna eget tortor commodo, sed pulvinar enim molestie. Fusce erat velit, gravida sed vestibulum in, consectetur at libero. Vestibulum eros mi, faucibus quis nibh sit amet, hendrerit dapibus arcu.
</div>
</body>
</html>
column width 屬性
若要設定列的寬度，請使用 column-width 屬性 −
.demo {
column-width: 70px;
}
示例
讓我們看示例 −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-width: 70px;
}
</style>
</head>
<body>
<h1>DemoHeading</h1>
<div class="demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse condimentum bibendum mi, nec scelerisque erat porta vitae. Nulla efficitur laoreet mauris, vel commodo risus tincidunt eu. Praesent et accumsan nisl. Sed quis finibus tortor, vitae pellentesque dui. Donec auctor libero libero, vitae vestibulum nibh condimentum at. Nam diam ipsum, rhoncus sed ultricies at, suscipit eget metus. Integer in ligula a velit congue semper et eu nisi. Mauris semper arcu sed nisl porta tincidunt.
Cras lobortis imperdiet ultrices. Curabitur dictum vestibulum condimentum. Cras tincidunt pellentesque felis ultricies elementum. Quisque nibh magna, vehicula in volutpat ac, posuere feugiat libero. Fusce dapibus nunc eget odio scelerisque, eu pulvinar magna suscipit. Donec venenatis semper hendrerit. Cras mattis sodales viverra. Phasellus volutpat leo odio, id interdum libero venenatis quis. Nunc nec quam arcu. Cras pellentesque, felis vel suscipit sollicitudin, orci sapien placerat quam, vitae pretium purus leo id erat. Praesent blandit urna eget tortor commodo, sed pulvinar enim molestie. Fusce erat velit, gravida sed vestibulum in, consectetur at libero. Vestibulum eros mi, faucibus quis nibh sit amet, hendrerit dapibus arcu.
</div>
</body>
</html>
更新於: 27-Dec-2023
140 瀏覽次數
廣告