English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
column-fill CSS 속성은 다열 요소 내의 열 길이가 컨텐츠 스트림에 어떻게 영향을 받는지 지정합니다. 다열 레이아웃 내의 컨텐츠는 균형을 이루며, 이는 모든 열의 컨텐츠가 같은 높이를 가지거나 auto 값이 사용될 때 컨텐츠의 필요에 따라 공간을 차지한다는 것을 의미합니다。
아래 표는 이 속성의 사용 설명과 버전 기록, 그리고 JavaScript 스크립트에서 이 속성의 사용 문법을 설명합니다。
| 기본 값: | balance |
|---|---|
| 적용 대상: | 다열 요소 |
| thừa kế: | 없음 |
| 애니메이션 가능: | 아니요 애니메이션 속성。 |
| 버전： | CSS3의 새 기능 |
| JavaScript 문법： | object.style.columnFill="auto" |
이 속성의 문법은 다음과 같습니다：
column-fill: auto | balance | initial | inherit
아래 예제는 column-fill 속성。
p {
-moz-column-fill: auto; /* 파이어폭스 */
column-fill: auto;
}테스트를 보세요‹/›아래 표는 이 속성의 값을 설명합니다。
| 값 | 설명 |
|---|---|
| auto | 순서대로 열을 채우기 때문에, 열의 길이는 다른 열 속성 값에 따라 다를 수 있습니다。 |
| balance | 순서대로 열을 채우기 때문에, 다른 열 속성 값에 따라 열 높이를 최대한 균형 있게 만듭니다。 |
| initial | 이 속성을 기본 값으로 설정합니다。 |
| inherit | 지정된 경우, 관련 요소는 부모 요소 column-fill 속성 값。 |
column-fill 속성의 브라우저 호환성, 아래 표의 숫자는 이 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다；현재 파이어폭스 브라우저 만이 이 속성을 지원합니다。
|
다음 튜토리얼을 참조하십시오：CSS3다열 레이아웃。
관련 속성：column-width，column-gap，column-rule，column-rule-width，column-rule-style，column-rule-color，column-span，column-count，columns。