流体的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

回答