流体 div 溢出边界答案

【问题标题】：Fluid divs spill over with border流体 div 溢出边界
【发布时间】：2013-05-27 19:51:55
【问题描述】：

我有 2 个 div 是 float: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 上设置固定宽度的边框（使用 %），而不会破坏设计？

编辑：

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

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

【问题讨论】：

标签： css

【解决方案1】：

是的，你可以。您只需将 margin-left 和 margin-right 从 2.5% 更改为 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;
}

希望对您有所帮助。

【讨论】：

这是在 150% 或更多的缩放时打破的。我认为你已经减少了足够的边距，所以 2px 边框不会干扰。这是一个很好的技巧，但是如果我下面有另一行（我实际上是这样做的）是宽度的两倍，那么数学就不会添加。 jsfiddle.net/BKXTn/3
使用min-width 属性解决了这个问题jsfiddle.net/BKXTn/4 - @soundswaste

【解决方案2】：

尝试一些css计算

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

【讨论】：