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 浏览次数
广告