如何有幾個相同大小的DIV塊取父容器

，我有以下CSS的100％：如何有幾個相同大小的DIV塊取父容器

#imageContainer { 
    width: 100%; 
    margin: 0px; 
    margin-bottom: 10px; 
} 

.divSelectImage { 
    border: 2px solid red; 
    width: 25%; 
    margin: 0px; 
    margin-bottom: 10px; 
    float: left; 
}

我有.divSelectImage四個實例這就是爲什麼寬度爲25％。我期望在#imageContainer的內部並排看到所有四個圖像。所以基本上，這四個圖像應該佔用100％的#imageContainer，這反過來佔據屏幕的100％。

但我不知道。儘管檢查螢火蟲，每個25％，最後一個圖像進入下一行。我必須讓他們達到24.5％左右，讓他們適應，但我不希望最後的空白。

這發生在Firefox和Google Chrome中。

是否有某種CSS巫術的，我很想念？我怎樣才能做到這一點？

我已經設置了場景上的jsfiddle：http://jsfiddle.net/J3KXE/

來源

2013-05-29 Antony D' Andrea

什麼是'0px'？你應該使用'0fonzes'。它意味着完全一樣的東西，而且涼爽得多。（也就是說，零爲零，給零單元的想法是重複的） –

我認爲它是因爲你有邊框：2px純紅色的.divSelectImage。 2px邊框將添加到25％的寬度，所以他們都會大於25％嘗試沒有邊界。 – azzy81

它，因爲你還沒有佔到每個圖像邊界2px的，除了它包含塊的100％的寬度增加12像素。您可以使用box-sizing屬性這就是新的CSS來約束邊界，填補區域的元素的內容寬度：

#imageContainer { 
    width: 100%; 
    margin: 0px; 
    margin-bottom: 10px; 
} 

.divSelectImage { 
    border: 2px solid red; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    width: 25%; 
    margin: 0px; 
    margin-bottom: 10px; 
    float: left; 
}

http://jsfiddle.net/J3KXE/1/

來源

2013-05-29 16:08:16 Adrift

非常感謝！這解決了問題！ –