CSS 열 너비 속성

열 너비가 100px이어야 함을 지정합니다.

div {
column-width: 100px;
}

아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.

정의 및 사용

column-width속성은 열 너비를 지정합니다 .

열 수는 요소 전체의 모든 콘텐츠를 표시하는 데 필요한 최소 열 수입니다.

column-width유연한 속성입니다. 브라우저에 대한 column-width최소 너비 제안 으로 생각하십시오 . 브라우저가 지정된 너비로 두 개 이상의 열을 맞출 수 없으면 열이 중지되어 단일 열로 떨어집니다.

표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

-webkit- 또는 -moz- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.

Property
column-width	50.0 4.0 -webkit-	10.0	52.0 2.0 -moz-	9.0 3.1 -webkit-	37.0 15.0 -webkit- 11.1

column-width: auto|length|initial|inherit;

Value	Description	Play it
auto	Default value. The column width will be determined by the browser
length	A length that specifies the width of the columns. The number of columns will be the minimum number of columns needed to show all the content across the element. Read about length units
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

<div> 요소의 텍스트를 세 개의 열로 나눕니다.

div {
column-count: 3;
}

열 사이에 40픽셀 간격을 지정합니다.

div {
column-gap: 40px;
}

열 사이의 규칙 너비, 스타일 및 색상을 지정합니다.

div {
column-rule: 4px double #ff00ff;
}