Computer >> Máy Tính >  >> Lập trình >> CSS

Đặt số lượng hoặc chiều rộng cột bằng CSS3

Sử dụng thuộc tính cột trong CSS3 để đặt số lượng và chiều rộng cột. Nó là một thuộc tính viết tắt cho các thuộc tính chiều rộng cột và số lượng cột. Nó được đặt là -

cột
columns: auto|column-width column-count|initial|inherit;

Ví dụ

Hãy để chúng tôi xem một ví dụ để đặt số lượng cột -

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

Đầu ra

Đặt số lượng hoặc chiều rộng cột bằng CSS3

Ví dụ

Bây giờ chúng ta hãy xem một ví dụ khác -

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

Đầu ra

Đặt số lượng hoặc chiều rộng cột bằng CSS3