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

我想给包含的divs留一个余量，但我不知道如何...

Answer 1

就像Padding一样。例如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.5英尺+ 2.5英寸）* 2盒= 10％的总保证金空间...然后每箱10％+ 45％是10％+ 90％= 100％

JS Fiddle

在评论中回答您的问题：

因为你的容器有一定的宽度，无论宽度是多少，只能容纳在它内部。 CSS的编码方式，任何元素的“TOTAL”宽度包括其定义的宽度，任何边框空间，填充和边距。这是任何元素操作的默认方式。在上面的代码中，您有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个单位的空气。那是......

10red + 10air + 10blue + 10air + 10green + 10air + 10yellow + 10 air + 10purple + 10 air

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

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

Answer 2

这是一个有效的jsfiddle。

仅更改了一个CSS块

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

这会在块周围创建均匀的间距。

试图在容器内均匀分配余量

2 个答案: