가변 크기 'wrap'/ stick/flow를 서로 플로팅 된 div로 가질 수 있습니까?

Question

저는 div 블록 목록을 높이가 다른 두 개의 열로 정렬하려고합니다. 모든 블록의 크기가 수정되면 자연스럽게 서로 겹치게됩니다. 그러나 높이가 다른 블록을 포함하기 때문에 높이가 더 큰 블록의 경우 인접 블록은 다음 블록으로 진행하기 전에 빈 공간이 많이 있습니다.

그러나 블록이 왼쪽으로 떠 있으면 오른쪽 열 블록이 자동으로 공백을 채우거나 그 반대의 경우도 한쪽에만 발생합니다.

그러나 저는 이제 양면에 유동성을 얻기위한 해결책을 찾고 있습니다.

내 말은 here의 예를 볼 수 있습니다.

두 번째 열의 모든 항목이 잘 맞았지만 왼쪽에는 더 큰 크기를위한 많은 공백이 있습니다.

CSS는 다음과 같이이다 :

.container { 
    width: 600px; 
} 
.item { 
    width: 250px; 
    height: auto; 
    background: darkgray; 
    border: 1px solid black; 
    float: left; 
    margin: 5px 0 0 5px; 
    padding: 5px; 
} 

Answer 1

당신은 3 가지 옵션이 단점이다이있는 모든 있습니다.

1. 는 가 시작 위치 각 항목을 계산하고 각 하나 따라서 상대적인 위치를 사용하여 위치를 변경하는 스크립트 용액을 작성한다.

2. 두 개의 컨테이너 열이 수레에 반대되도록 마크 업을 변경하십시오. 프로그래밍 방식으로 사이에 항목을 배포하려면 해야합니다.

3. 표를 사용하여 각 항목의 높이가 옆에있는 것과 일치하도록하십시오.

분명히 마지막 두 개는 매우 의미 상으로 들리지 않으며 첫 번째 항목은 항목 목록의 크기에 따라 실용적이지 않을 수 있습니다. 나는 CSS 3에서 그렇게 할 수있는 방법이 있다고 생각하지만 현재로서는 브라우저 지원이 부족하다.