流体div溢出边界

Question

我有两个float:left的div并且像这样并排显示：

他们的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上使用固定宽度的边框（使用％），而不会破坏设计？

修改

我使用Passerby的评论和关于box-sizing的问题解决了这个问题：Fluid CSS layout and Borders

这使我可以愉快地添加任何填充/边框到流体div而不用担心。

Answer 1

是的，你可以。您只需将margin-left和margin-right从2.5%更改为0.5%

以下是Working Fiddle

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;
}

希望这有助于。

Answer 2

尝试一些css计算

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

• 它不适用于mozilla