CSS3 다중 열 레이아웃
CSS3 다중 열 레이아웃은 텍스트의 여러 열을 쉽게 정의 할 수 있습니다 - 다만 신문 등 :
매일 Ping
Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta
nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
숫자는 다음 -webkit- 또는 -moz- 접두사와 함께 일 첫 번째 버전을 지정합니다.
| 재산 | |||||
|---|---|---|---|---|---|
| column-count | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-gap | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-rule | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-rule-color | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-rule-style | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-rule-width | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-width | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
CSS3 다중 열 속성
이 장에서는 다음과 같은 다중 열 특성에 대해 배우게됩니다 :
-
column-count -
column-gap -
column-rule-style -
column-rule-width -
column-rule-color -
column-rule -
column-span -
column-width
여러 열을 만들기 CSS3
column-count 속성은 요소로 분할한다 열의 수를 지정한다.
다음은 텍스트 나눕니다 <div> 3 열로 요소를 :
예
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
»그것을 자신을 시도 열 사이의 간격을 지정 CSS3
column-gap 속성은 열 사이의 간격을 지정합니다.
다음 예제는 열 사이에 40 픽셀의 간격을 지정합니다 :
예
div
{
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
»그것을 자신을 시도 CSS3 열 규칙
column-rule-style 속성은 열 사이의 규칙의 스타일을 지정합니다 :
예
div
{
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
}
»그것을 자신을 시도 column-rule-width 속성은 열 사이의 규칙의 폭을 지정합니다 :
예
div
{
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
}
»그것을 자신을 시도 column-rule-color 속성은 열 사이의 규칙의 색상을 지정합니다 :
예
div
{
-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
-moz-column-rule-color: lightblue; /* Firefox */
column-rule-color: lightblue;
}
»그것을 자신을 시도 column-rule 속성은 위의 모든 열 규칙 - * 속성을 설정하는 약식 속성이다.
다음의 예는 열 사이 규칙의 너비, 스타일, 색상을 설정
예
div
{
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
}
»그것을 자신을 시도 얼마나 많은 열 Element의해야 스팬을 지정합니다
column-span 속성 요소가 전역에 걸쳐있는 방법을 많은 열을 지정합니다.
다음 예는 것을 지정 <h2> 요소는 모든 컬럼에 걸쳐해야합니다 :
열 너비를 지정
column-width 속성은 열에 대한 제안, 최적의 폭을 지정합니다.
다음 예는 열에 대한 제안, 최적의 폭이 100 픽셀해야한다고 지정
CSS3 다중 열 속성
다음 표는 모든 멀티 컬럼 등록 정보를 나열합니다 :
| 재산 | 기술 |
|---|---|
| column-count | 요소가로 분할되어야 열의 수를 지정 |
| column-fill | 열을 채우는 방법을 지정합니다 |
| column-gap | 열 사이의 간격을 지정 |
| column-rule | 모든 열 규칙 - * 속성을 설정하는 약식 속성 |
| column-rule-color | 열 사이 룰의 색상을 지정 |
| column-rule-style | 열 사이의 규칙의 스타일을 지정합니다 |
| column-rule-width | 열 사이 룰의 폭을 지정 |
| column-span | 요소가 전역에 걸쳐있는 방법을 많은 열 지정 |
| column-width | 열에 대한 제안, 최적의 폭을 지정합니다 |
| columns | 열 폭과 열 수를 설정하기위한 약식 속성 |