在div

Question

我根本无法解决这个问题：我有一个以屏幕为中心的div，宽度为60％。在这个div中，我还有3个div，它们向左漂浮，宽度为33％，颜色为灰色。 div中填充了文本和每个div一个图像。每个div现在应该在＆＃34; maindiv＆＃34;内占据1/3的空间。这工作正常，但只要我给我的3＆＃34; contentdivs＆＃34;一个填充，所以文本有点分开，第三个div在其他人之下徘徊。我还希望在我的3个div之间留一个余量，所以所有div之间都有差距。但这只有在我给div的宽度为31％时才有效。一旦我缩小了我的浏览器，第三个会再次低于其他浏览器。

现在看起来如何：

宽度为33.33％

如何解决这个问题？我的意思是我通过设置％的大小将div设置为相对宽度。因此，只要缩小浏览器窗口，div就会缩小。我试图用其他div来包围所有div，然后用边距和填充物搞乱但是它只是不起作用。

Answer 1

很可能是盒子模型的错。填充，边距和边框可以以不同方式添加在一起。将box-sizing:border-box添加到容器及其元素中。这肯定会带来你打算做的事情，shinyServer()会按预期的那样完成。

添加保证金仍会破坏该项目？还有一个名为calc()的伟大事物。假设您有width:33.3333% margin，那只是几个像素太多了。使用8px，您可以减去额外的保证金，如下所示：

calc()

请注意，减号周围必须有空格。试一试，包括你的保证金。

Answer 2

将box-sizing: border-box应用于所有相关元素（或整个文档，如Bootstrap所做）。 http://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

然后，而不是边距，使用填充作为外部间距。这样就不需要完全进行心理数学了。

div {
    box-sizing: border-box;
}
.one-third, .inner, .full-width {
    padding: 8px;
}
.one-third {
    float: left;
    width: 33.333%;
}
.inner {
    background-color: pink;
}

<div class="full-width">
    <div class="inner">Full-width div</div>
</div>

<div class="one-third">
    <div class="inner">Content</div>
</div>

<div class="one-third">
    <div class="inner">Content</div>
</div>

<div class="one-third">
    <div class="inner">Content</div>
</div>

<强> Fiddle demo

Answer 3

您最好的选择是让三列和边距等于100％。如果您知道自己只有三列，那么这很容易：

.item

只要只有三个，当你覆盖第一个box-sizing时，它总是加起来为100％。如果您没有覆盖第一个项目，那么您的列前面将有一个空格，而最后一列将不适合。混合像素和百分比将为您提供网格中的问题（除非它们是填充并且您正在使用box-sizing）。保证金不包含在{{1}}中，因为它不是主框模型的一部分。