목록 항목이 제대로 정렬되지 않았습니다.

Question

변수 높이가있는 항목의 목록을 만들려고합니다. 수평 행으로 정렬 된 항목으로 깔끔한 목록을 만들려고하면 목록 항목의 높이가 모두 같을 때 모두 잘됩니다. 1 개 이상의 아이템의 높이가 더 높으면 잘못됩니다. 문제를 아주 분명하게 보여주기 위해 JSFiddle을 만들었습니다. 누구든지 나를 도울 수 있습니까?

http://jsfiddle.net/NNLDn/

내 HTML :

<div> 
    <ol> 
     <li></li> 
     <li></li> 
     <li style="height: 140px;"></li> 
     <li></li> 
     <li></li> 
     <li></li> 
    </ol> 
</div> 

내 CSS : 당신이 행 당 li 항목의 수를 알고있는 경우

가

div { 
    width: 730px; 
} 

ol { 
    width 730px; 
    margin-left: -40px; 
} 

ol li { 
    display: block; 
    width: 167px; 
    height: 120px; 
    margin: 0 0 15px 15px; 

    background:red; 
    float: left; 
} 

Answer 1

당신은 display:inline-block 사용을 고려 대신한다 "업 걸려" float:left이면 요소의 세로 맞춤을 vertical-align으로 재생할 수도 있습니다.

Answer 2

내가 아는 유일한 CSS의 솔루션은, 둘러싸이다 div의 각 행을 정렬 한 다음 div를 플로팅합니다. 즉, 자동으로 각 사업부가 가장 높은 리튬의 높이 조정 방법 및 얻을 것이다 부동 li의 아무도는

div div { float: left; clear: both; }

http://jsfiddle.net/NNLDn/1/

Answer 3

나는 내 휴대 전화에서 오전으로, 이제 쉽게 재확인 할 수없는,하지만 난 당신이 display:inline-block를 사용하지 float