Question

根据我的阅读，填充表示为％基于父容器计算（就像边距一样）。因此，如果是这种情况，那么下面的3个元素应该在父div之间均匀分布。但是，他们不是。

如果我正确地进行数学计算，你的宽度就像这样分开：

2％填充

2％填充权

所有三个元素的剩余

12％（4％x 3）

所有三个元素的

12％（4％x 3）边距

所有三个元素的

72％（24％x 3）宽度

100％所有百分比的总和，因此三个元素应均匀分布。

我错过了什么吗？填充不是这样计算的吗？我的数学错了吗？

＆＃13;

#parent {
    background-color: #F00;
    display: block;
    overflow: hidden;
    margin-right: auto;
    margin-left: auto;
    max-width: 850px;
    padding: 2%;
}
.element {
    background-color: #0F0;
    display: block;
    float: left;
    height: 100px;
    width: 24%;
    margin-left: 4%;
    margin-right: 4%;
}

＆＃13;

<div id="parent">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>

＆＃13;

Answer 1

注意，相对于生成的包含块的宽度，计算百分比padding或margin。

什么是containing block？

在CSS 2.1中，许多框位置和大小是相对于称为包含块的矩形框的边计算的。通常，生成的框用作包含后代框的块;我们说一个盒子＆＃34;建立＆＃34;它的后代的包含块。短语＆＃34;包含块＆＃34;意味着＆＃34;盒子所在的容纳块，＆＃34;不是它产生的那个。

在您的示例中，#parent{padding:2%;}基于其父body元素计算，而不是#parent本身，尤其是当视口的宽度大于{{ 1}}。

此外，包含850px div左右边距的总宽度总是占据包含块.element边缘的96％。

因此，#parent的总计算不正确。请参阅下面的更新演示。

＆＃13;

100%

＆＃13;

#parent {
  background-color: #F00;
  overflow: hidden;
  margin-right: auto;
  margin-left: auto;
  max-width: 850px;
}
.element {
  background-color: #0F0;
  float: left;
  height: 100px;
  width: calc(68% / 3);
  margin: 4%;
}
.element:first-child {
  margin-left: 8%
}
.element:last-child {
  margin-right: 8%
}

＆＃13;

Answer 2

width，padding-*和margin-*中的百分比相对于containing block得到解决。

对于.element项，包含的区块是.parent的内容边缘。不是填充或边距为1，因此它不包括padding: 2%上的.parent。

如果您的.element位于绝对位置（且.parent相对定位），则其包含的块将是.parent的填充边，就像你要。当然，这会使.element完全out of flow并使您的布局混乱。

#parent {
  background-color: #F00;
  display: block;
  overflow: hidden;
  margin-right: auto;
  margin-left: auto;
  max-width: 850px;
  padding: 2%;
  height: 100px;
  position: relative;
}
.element {
  background-color: #0F0;
  position: absolute;
  height: 100px;
  width: 24%;
  left: 06%; /* [[2% + 4%]]+24%+4% + 4%+24%+4% + 4%+24%+4% + 2% */
}
.element + .element {
  left: 38%; /* [[2% + 4%+24%+4% + 4%]]+24%+4% + 4%+24%+4% + 2% */
}
.element + .element + .element {
  left: 70%; /* [[2% + 4%+24%+4% + 4%+24%+4% + 4%]]+24%+4% + 2% */
}

<div id="parent">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

Answer 3

padding: 2%;上的#parent指的是包含块宽度的2％，而不是#parent本身。

参考文献：https://developer.mozilla.org/en-US/docs/Web/CSS/padding

Answer 4

元素占父容器的96％，而不是100％。为了均匀分配，他们需要占用100％的父容器。

Answer 5

有一些问题。

首先显而易见的是padding: 2%引用父母，因此不能以这种方式添加。

其次，您可能希望父级宽度为850px。有一个盒子模型发挥作用。您需要使用box-sizing: border-box，因为这意味着填充包含在宽度中。

最后，以百分比表示的元素宽度是指父中的可用空间，使得正确值为25.3333％（为25.333％+ 8％= 33.333％）。

请参阅：http://codepen.io/anon/pen/aZdyox

Answer 6

基本上你想要 $6x + 3y = 100$ ，其中 $x$ 是整数边距宽度， $y$ 是整数框宽度。

$x$ 或 $y$ 没有等于100的整数组合。

所以基本上你不能用这些约束做你想做的事。

如果我的数学是正确的，那么它应该居中，对吗？

6 个答案: