독립 행 높이가있는 다중 열 레이아웃 구현

Question

새로운 Google+ 레이아웃과 비슷한 레이아웃을 만들고 this question (html 사용)과 비슷한 레이아웃을 만들려고합니다.

현재 Google+는 각 열마다 1 개의 div를 사용합니다. 나는 이것을 할 또 다른 방법이 있는지보기 위해 노력하고 있습니다.

아마도 CSS3의 flexbox 모델이 도움이 될 것입니다. 그러나 호환성 수준은 ... meh입니다.

필자는 인라인 블록 모델을 시도했지만 이렇게하면 서로의 높이에 독립적이지 않은 행을 만들 수 있습니다.

기존 솔루션이 있지만 모든 프로그램에는 IE10 + 또는 IE11 +이 필요합니다. IE7 + 호환 솔루션이 필요합니다. 난 열당 div가 표시되지 않습니다.

아무도 비슷한 일을 한 적이 있습니까?

Answer 1

CSS 멀티 컬럼 레이아웃 모듈은 원하는 것을 처리 할 수 ​​있습니다.

http://codepen.io/cimmanon/pen/CcGlE

.foo { 
    columns: 30em; /* desired number of columns and/or width of column */ 
} 

접두사

이 필요할 수있다. http://caniuse.com/#feat=multicolumn