높이가 교대로 늘어나는 목록 항목

Question

콘텐츠를 기준으로 교대로 높이가있는 항목이있는 목록에 문제가 있습니다. 이로 인해 행이 다음과 같이 끊어집니다. http://jsfiddle.net/PYRGb/ 효과를 보려면 디스플레이보기의 크기를 조정 해보십시오.

필자가 이상적으로 생각하는 것은 목록 항목이 위 행의 가장자리에 부딪치지 않고 행을 만들만큼 충분한 공간이있는 다음 행으로 계속 진행하는 것입니다. 이것이 가능한가?

• 난 내가 '행'언급 알고 테이블은 해결책이 될 수도 있지만 장치의 범위에 디스플레이 유체 및 적응력을 유지하기 위해 목록을 사용하고 . 내가 찾은 유일한 해결책

• 내가 내용하지 않습니다 오버 플로우과 같이 특정 오전 min-height 설정하는 것입니다 : http://jsfiddle.net/PYRGb/1/을하지만 난 정말 목록 항목에서 내용의 양을 예측할 수 및 가에 목록 항목을 싶습니다 가능한 경우 높이를 조정하십시오.

EDIT : 표시 크기를 조정하여 3 열로 표시하면 필요한 효과를 볼 수 있지만 다른 상황에서는 작동하지 않습니다.

감사합니다 (이, 내가 크롬 26 사용하고 모든 브라우저에서 동일한 지 확인하지 않은 경우)

Answer 1

는 플로트를 제거하고 수직 정렬 가기와 인라인 블록으로 리튬 표시합니다.

ul li{ 
    width: 100px; 
    padding: 10px; 
    margin: 0 0 20px 20px; 
    border: 1px solid red; 
    background: #eaeaea; 
    display: inline-block; 
    vertical-align: top; 
} 

http://jsfiddle.net/stevendwood/PYRGb/2/

당신은 중간에 수직 정렬을 설정하거나 당신이 무엇을 선호.