css - 试图为容器内的均匀 div 留出余量

Question

我有这个代码:

<div class="container">
    <div class="contained one">foobar</div>
    <div class="contained two">foobar</div>
</div>    

-- css --

.container {
    background: red;
    width: 500px;
    height: 200px;
}
.contained {   
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    float: left;
    padding: 10px;
}
.one {
    background: blue;
}
.two{
    background: green;
}

我想为包含的 div 留出边距，但我不知道如何......

Answer 1

这就像填充一样。 margin: 10px;例如。

请注意，边距也需要计算到元素的宽度中。所以我建议给出 % 边距，然后确保你的总边距 % 加上你的宽度 = 100%。

你可以做一些像...

.contained {   
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 45%;
    margin: 2.5%;
    float: left;
    padding: 10px;
}

这是可行的，因为 (2.5left + 2.5right) * 2 个盒子 = 10% 的总边距空间...那么每个盒子的 10% + 45% 就是 10% + 90% = 100%

JS Fiddle

---

在评论中回复您的问题:

因为你的容器有一定的宽度，不管那个宽度是多少，里面只能容纳这么多。 CSS 的编码方式是，任何元素的“总”宽度包括其定义的宽度、任何边框空间、填充和边距。这是任何元素运行的默认方式。在上面的代码中，你有 box-sizing: border-box。这告诉浏览器计算“宽度”属性，包括填充和边框。遗憾的是，没有包含边距空间的代码。

想象一下吧。你有一个盒子，里面可以装 100 100 个球，而且还要盖上盒子的盖子。如果你有 101 个球，盖子将不会关闭。所以假设你想在盒子里放 50 个蓝球和 50 个红球。您仍然可以关闭盖子，因为您没有超过 100 个球的限制。现在假设您希望 50 个红球和 50 个蓝球之间有一定的空间。让我们想象这个空间只是空的“空气”，但实际上，空气实际上也占据了空间。因此，为了在两组球之间容纳 10 个“球单位”的空气“空间”，需要发生以下两种情况之一才能仍然关闭盒子的盖子。

您可以将盒子扩大 10 个单位，总共 110 个“球单位”- 红球 50 个，蓝球 50 个，空气分隔两组球 10 个。或者，您可以取出一些已经在容器内的球，以适应 10 个“球单位”的空气。所以你可以有 45 个蓝球和 45 个红球和 10 个单位的空气 = 100 并盖上盒子的盖子。只要红球、蓝球和空气的数量等于您的盒子最多 100 个球单位，那么它们就可以装下，您可以合上盖子。可以使用任何组合。例如，您可以有 10 个红球、10 个蓝球、10 个绿球、10 个黄球和 10 个紫球，每组后有 10 个单位的空气。那就是……

10红+10空+10蓝+10空+10绿+10空+10黄+10空+10紫+10空

10+10+10+10+10+10+10+10+10+10 = 100

现在... 也就是说，如果您没有使用 box-sizing: border-box;那么您还必须在计算中包括填充和边框以及边距。