CSS "vertical"Grid

Question

드래그 가능하고 정렬 가능한 아이콘으로 채워진 크기 조정 가능한 표를 만들고 싶습니다 (바탕 화면과 유사). 문제는 css "float : left"를 사용하면 왼쪽에서 오른쪽으로, 위에서 아래로까지 "수평"채우기 표를 얻습니다. 원하는 것은 위에서 아래로, 왼쪽에서 오른쪽으로 (또한 바탕 화면 같은)

현재 상태 :

[ icon1 ][ icon2 ][ icon3 ] 
[ icon4 ][ icon5 ][ empty ] 
[ empty ][ empty ][ empty ] 

원하는 주 : HTML 태그 또는 CSS 규칙에

[ icon1 ][ icon4 ][ empty ] 
[ icon2 ][ icon5 ][ empty ] 
[ icon3 ][ empty ][ empty ] 

어떤 sugestions?

바로 지금 컨테이너 div의 높이를 가져 오는 js 스크립트가 있는데 아이콘 목록 높이보다 작 으면 다른 ul을 만들고 숨겨진 것으로 채 웁니다. 그러나 그렇지 않습니다. 그것이 최상의 해결책이라고 생각하십시오.

감사

이 추가적으로 참고 : 나는 jQuery를하고 jQuery를 UI를 사용하고는 proyect 구글 크롬 용으로 만 그래서 브라우저 호환성에 대해 많이 걱정하고 있지 않다, 또한, 내가 HTML5에 문제가 없거나 브라우저는 CSS3 솔루션입니다. 마지막으로, 아이콘이 dinamicaly을로드하고 난 아이콘이 될 수 있다고 생각하지 않습니다 있도록 cointainer의 크기를 재조정 할 수 있습니다 절대

위치에 대한

* Sory을 내 영어 *

Answer 1

이에 column-width 및 column-gap를 사용하여 가능 수 CSS3

Answer 2

다중 열 목록을 사용하십시오. 다음은 jquery를 사용하여 다중 열 목록을 만드는 예제입니다. 일단 당신이 여러 열에 그것을 가지고 당신이 필요로 할 수 있어야합니다. 각 열에 클래스를 적용하여 모든 열 대신 열의 크기를 조정할 수 있도록 제안하고 li을 끌어서 놓기 섹션의 컨테이너로 설정할 수 있습니다.

http://jsbin.com/ifaca/