'목록 스타일'로 정렬 된 상태에서 div를 세로로 정렬

Question

나는이 문제에 대한 해결책을 더 이상 생각할 수 없을 때가왔다. 달성하고자하는 것은 다음과 같습니다. 일부 div에서 내용을 채 웁니다 (예 : 0-10의 값). 그런 다음 표시 할 때 사용자 창 크기에 반응하는 방식으로 나열되어야합니다. 그것은 다음과 같아야 큰 화면에서 :

1 | 4 | 7 | 10 
2 | 5 | 8 
3 | 6 | 9 

그리고 작은 화면에

:

1 | 5 | 9 
2 | 6 | 10 
3 | 7 
4 | 8 

내가 div의 나에게이 같은 출력을 제공하는 float: left; 속성을 제공함으로써 그것을 시도 :

1 | 2 | 3 | 4 
5 | 6 | 7 | 8 
9 | 10 

문제점은 다음 순서는 예상 출력과 동일하지 않고, 다음 '로우'가 COLS를 먼저 작성되지되고있다. 누구나 css와 html로 어떻게 이런 일을 할 수 있는지 솔루션을 알고 있습니까?

Answer 1

현대적인 솔루션은 CSS 다중 열 모듈입니다. 이처럼 사용할 수 있습니다

.content { 
    -webkit-column-width: 80px; 
    -webkit-column-gap: 5px; 
} 

http://jsfiddle.net/EN92F/

확인 support, IE10 +.

브라우저 (예 : IE8)에서 지원되지 않는 경우 여기서는 http://jsfiddle.net/EN92F/1/과 같이 단일 열 레이아웃으로 정상적으로 저하됩니다. 그리 좋지는 않습니다.

추가 읽기 Using CSS multi-column layouts.