예
열에 대한 제안, 최적의 폭을 지정합니다 :
div
{
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
-moz-column-width: 100px; /* Firefox */
column-width: 100px;
}
»그것을 자신을 시도 더 "Try it Yourself" 아래의 예.
정의 및 사용
열 너비 속성은 열에 대한 제안, 최적의 폭을 지정합니다.
| 기본값: | auto |
|---|---|
| 상속 : | no |
| 애니메이션 : | yes. Read about animatable Try it |
| 번역: | CSS3 |
| 자바 스크립트 구문 : | object .style.columnWidth="100px" Try it |
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
숫자는 -webkit- 다음 또는 접두어와 함께 일 첫 번째 버전을 지정 -moz-.
| 재산 | |||||
|---|---|---|---|---|---|
| column-width | 50.0 4.0 -webkit- | 10.0 | 2.0 -moz- | 9.0 3.1 -webkit- | 37.0 15.0 -webkit- 11.1 |
CSS 구문
column-width: auto|length|initial|inherit;속성 값
| 값 | 기술 | 플레이 |
|---|---|---|
| auto | 기본값. 열 폭은 브라우저에 의해 결정됩니다 | »플레이 |
| length | 컬럼의 폭을 지정하는 길이 | »플레이 |
| initial | 기본값으로이 속성을 설정합니다. 초기에 대해 알아보기 | »플레이 |
| inherit | 부모 요소에서이 속성을 상속합니다. 대한 상속 읽기 |
더 예
열 카운트
A의 텍스트 나누기 <div> 세 개의 열로 요소를 :
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
»그것을 자신을 시도 열 갭
A의 텍스트 나누기 <div> 세 개의 열로 요소를, 그리고 열 사이에 40 픽셀의 간격을 지정합니다.
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
»그것을 자신을 시도 열 규칙
열 사이의 규칙의 폭, 스타일과 색상을 지정합니다.
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-webkit-column-rule: 4px outset #ff00ff; /* Chrome,
Safari, Opera */
-moz-column-rule: 4px outset #ff00ff;
/* Firefox */
column-rule: 4px outset #ff00ff;
}
»그것을 자신을 시도 관련 페이지
CSS3 튜토리얼 : CSS3 다중 열
HTML DOM 참조 : columnWidth property