플로트도 서로 다른 높이로, 두 개의 열에서, 왼쪽과 오른쪽, 요소의 수를 변경하는 것은

Question

이 jsFiddle를 참조하십시오 http://jsfiddle.net/jRGyS/

내가도 (석회) 블록 바로 부동, 블록에서 두 개의 열을 만들려면 홀수 (파란색) 블록은 왼쪽으로 떠있었습니다. 그러나 블록의 높이가 다른 경우 레이아웃이 약간 엉망이 될 수 있습니다. 마지막 파란색 블록이 다른 파란색 블록에 대해 위로 떠 다니는 것을 볼 수 있지만이 파란색 블록은 왼쪽에 있거나 오른쪽으로 떠 있어야합니다.

문제는 이러한 블록이 동적으로로드되고 높이가 항상 다릅니다. 따라서 DOM을로드 한 후 Javascript를 제외하고는 얼마나 많은 객체가 있는지, 각 객체의 높이와 표시 순서를 예측할 수 없습니다.

아이디어 케이스는 Javascript가 없지만 가능한 경우 JS를 사용할 수 있습니다.

Answer 1

사용 명확 : 왼쪽 명확한 : 바로이 JSFiddle

div.block { 
    background: blue; 
    width: 100px; 
    height: 100px; 
    margin-bottom: 10px; 
} 
div.block:nth-child(odd) { 
    float: left;    
    clear: left; 
} 
div.block:nth-child(even) { 
    background: lime; 
    float: right;    
    clear: right; 
}