고정 폭 컨테이너를 수직으로 자동 채우는 열 레이아웃?

높이가 다른 요소가 있지만 컨테이너 요소에는 고정 폭이 있습니다. 요소를 inline-block으로 설정하면 열이 자동으로 채워지지만 가로로 채워집니다. 요소를 나타내는 숫자를 확인하십시오.고정 폭 컨테이너를 수직으로 자동 채우는 열 레이아웃?

1## 2## 3## 
### ### ### 
###  ### 
     ### 
4## 5## 6## 
### ### ### 
### 
7## 8## 9## 
### ### ### 
     ###

내가 원하는 것은 수직으로도 채우는 것입니다.

1## 2## 3## 
### ### ### 
### 5## ### 
4## ### ### 
### 8## 6## 
### ### ### 
7##  9## 
###  ### 
     ###

그리고 컨테이너 요소의 너비가 증가한다고 가정합니다.

1## 2## 3## 4## 
### ### ### ### 
### 6## ### ### 
5## ### ### 8## 
###  7## ### 
9##  ### 
### 
###

HTML과 CSS만으로이 작업을 수행 할 수있는 방법이 있습니까?

2011-09-24 Anonymous

AFAIK html과 css를 사용하면 달성 할 수 없다고 생각합니다. js/jquery를 사용해야합니다. –

CSS3 Columns (Compatibility table)을 사용하면이 작업을 수행 할 수 있습니다. 예 :

ol { 
    list-style: decimal outside; 

    -moz-column-count: 3; 
    -webkit-column-count: 3; 
    column-count: 3; 
}

다중 열 모듈은 IE9에서 지원되지 않지만 IE10에서는 지원됩니다. 불행하게도이 파이어 폭스 (Bugzilla)에서 지원되지 않습니다

ol li { 
    -webkit-column-break-inside: avoid; 
    break-inside: avoid; 
}

: 자식 요소가 분할되는 것을 방지하기 위해 당신은 break-inside 속성을해야합니다. http://jsfiddle.net/Q4BNm/2/

2011-09-24 05:25:12

열은 소스 순서대로 작동하지 않습니다. 먼저 열을 채우지 말고 먼저 채 웁니다. –

@AndrewVit 아니, 그렇지 않다. 이것은 현재 CSS 기술로 할 수있는 가장 가까운 것입니다. –

CSS 레이아웃은이 기능을 지원하지 않습니다

여기 데모입니다. 원하는 효과를 얻으려면 Masonry과 같은 자바 스크립트 레이아웃 도구를 사용해야합니다.

2011-09-24 05:26:46

답변