플로트 된 요소를 새 줄로 시작합니다.

플로트 된 <li> 요소가있는 목록을 가지고 있는데 높이가 다르므로 문제가 있습니다. 나는 theres 대안을 알고, display:inline-block하지만이 propery 여분의 공백을 추가하고, 나는 왜 몰라.플로트 된 요소를 새 줄로 시작합니다.

내 CSS :

ul { 
    padding:0; 
    margin:0; 
    list-style:none; 
    width:700px; 
} 

ul li { 
    float:left; 
    border:1px solid #000; 
    width:24%; 
    margin:0 0.3% 20px 0.3%; 
    font-size:11px; 
} 

.yellow { 
    background:yellow; 
}

온라인 미리보기 :

clear:both;

나처럼 어쩌면

clear:right;

: http://jsfiddle.net/f3CA3/1/

출처

2014-01-20 user1452062

CSS에서만 가능하지 않습니다. 'display : table- *'패밀리를 제외하고. 'inline-block '은 공백 (인라인)을 무시하지 않고 블록 (가능한 한 수평 적으로 확장)으로 행동한다는 것을 말한다. –

''inline-block'과 공백을 위해서 : http://stackoverflow.com/questions/5256533/a-space-between-inline-block-list-items –

이와 비슷한 것 -> http://jsfiddle.net/ f3CA3/3 /? – Morpheus

당신이 그것을로 측면을 취소 할 수 예, 될 수도;

clear:left;

출처

2014-01-20 16:29:27

왜 당신은 분명히하겠습니까? 오른쪽에 아무것도 흘러 나오지 않을 때 맞습니까? – BoltClock

플로트 된 요소를 새 줄로 시작합니다.

답변

관련 문제