強制浮動元素開始新行

我有一個列表浮動<li>元素，高度是不同的，這就是問題所在。我知道我知道一個替代方案，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; 
}

在線預覽：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:both;

也許

clear:right;

只是作爲一個例如，也可以;

clear:left;

來源

2014-01-20 16:29:27

當沒有任何東西飄到右邊被清除時，你爲什麼要「清楚：正確」？ – BoltClock

強制浮動元素開始新行

回答

相關問題