CSS 수직 스택

Question

나는 현재 inline-blockdiv의 묶음을 가로로 쌓아 올렸습니다. 컨테이너가 가득차면 다음 행에 멋지게 넘쳐납니다 :

HTML을 변경하지 않고 똑같은 작업을 수직으로 수행 할 수 있습니까?

내가 용기 div으로 각 열을 이동했다,이 사진을 생성합니다. 소스 HTML을 수정할 수 없으므로 이것이 옵션이 아닙니다.

CSSDesk

Answer 1

CSS2 아아, 내 지식이 순수 CSS와 HTML 불가능
. 나는이 꽤 정중하게 비록 jQuery 플러그인 Masonry 알아요.

CSS3
(가 언급 된 벽돌 많은 옵션이되지 않습니다하지만) 당신은 질문의 레이아웃을 달성 할 수 CSS3's Multi-column Layout Mode 사용. IE 지원은 10 개 이상에서 생각할 수 있습니다. 일부 브라우저 접두어가 필요할 수도 있습니다.

column-count: 3; 
column-gap: 10px; 
width: 480px; 

이 위가 this blogpost에서 적응했다 (이 are others하지만 너무) this demo에 링크 : 비 접두사 버전 (컨테이너)에 다음과 같이 보일 것입니다.

Answer 2

브라우저 지원에 따라 column-count을 사용할 수 있습니다.