Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

การตั้งค่าจำนวนคอลัมน์หรือความกว้างโดยใช้ CSS3


ใช้คุณสมบัติคอลัมน์ใน CSS3 เพื่อกำหนดจำนวนคอลัมน์และความกว้าง เป็นคุณสมบัติชวเลขสำหรับคุณสมบัติความกว้างคอลัมน์และจำนวนคอลัมน์ ถูกกำหนดเป็น −

columns: auto|column-width column-count|initial|inherit;

ตัวอย่าง

เรามาดูตัวอย่างการนับคอลัมน์กัน −

<!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>

ผลลัพธ์

การตั้งค่าจำนวนคอลัมน์หรือความกว้างโดยใช้ CSS3

ตัวอย่าง

เรามาดูตัวอย่างอื่นกัน −

<!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>

ผลลัพธ์

การตั้งค่าจำนวนคอลัมน์หรือความกว้างโดยใช้ CSS3