流體的div溢出邊境

我有2周的div是float:left，並顯示這樣的並排：流體的div溢出邊境

enter image description here

對他們的CSS是：

.movie-activity-feed{ 
    background:#f87777; 
    float:left; 
    padding:1%; 
    margin:1% 2.5%; 
    width:46%; 
}

而且他們佔據了整行正確。但是，當我添加邊框這樣的：

border:2px solid #000;

的div溢出這樣的：

我知道，因爲邊界的額外加上了8px不在行中可用的多數民衆贊成。但是有沒有辦法將我的利潤聲明爲2.5% - 2px？總之，有沒有一種方法可以在流體div上使用固定寬度邊界（使用％），而不會破壞設計？

enter image description here

編輯：

我解決了這個用路人的評論和這個問題有關box-sizing：Fluid CSS layout and Borders

這讓我任何填充/邊框愉快地添加到流體DIV而不用擔心。

工作中使用的包裝'div'與2px的填充和黑色的背景？ – Knelis

http://jsfiddle.net/BKXTn/2/？ – Passerby

是的，箱子大小是關鍵。謝謝！ – soundswaste

是的，你可以。你只需要從2.5%您margin-left和margin-right更改爲0.5%

的HTML：

<div class="movie-activity-feed"></div> 
<div class="movie-activity-feed"></div>

的CSS：

.movie-activity-feed{ 
    background:#f87777; 
    float:left; 
    padding:1%; 
    margin:1% 0.5%; 
    width:46%; 
    border:2px solid #000; 
}

希望這有助於。

2013-05-27 09:13:11 Nitesh

太棒了！它真的有效 – edd

這是在150％或更多的縮放。我認爲你已經減少了足夠的邊距，所以2px邊框不會干擾。這是一個很好的黑客攻擊，但是如果我在下面有另一行（我實際上是這樣做的），那是寬度的兩倍，那麼數學不會添加。 http://jsfiddle.net/BKXTn/3/ – soundswaste

使用'min-width'屬性解決了這個問題http://jsfiddle.net/BKXTn/4/ - @soundswaste – Nitesh

嘗試一些CSS計算

margin: 1px calc(2% - 10px);

2013-05-27 11:51:55

回答