Computer >> 컴퓨터 >  >> 프로그램 작성 >> CSS

CSS3를 사용하여 열 수 또는 너비 설정

<시간/>

CSS3의 columns 속성을 사용하여 열 개수와 너비를 설정합니다. 열 너비 및 열 개수 속성의 약식 속성입니다. -

로 설정됩니다.
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를 사용하여 열 수 또는 너비 설정