css - 流体 div 溢出边界

Question

我有 2 个 divfloat:left并排显示，如下所示：

在此处输入图像描述

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

在此处输入图像描述

编辑：

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

这使我可以愉快地向流体 div 添加任何填充/边框，而无需担心。

score 1 · Accepted Answer

Yes you can. You just need to change your margin-left and margin-right from 2.5% to 0.5%

The HTML:

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

The CSS:

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

Hope this Helps.

score 0 · Accepted Answer

0

尝试一些 CSS 计算

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

于 2013-05-27T11:51:55.090 回答

2 回答 2