右 div 不正确地左对齐页面的 25%答案

【问题标题】：Right Div Incorrectly Aligns Left 25% of Page右 div 不正确地左对齐页面的 25%
【发布时间】：2017-09-05 09:34:53
【问题描述】：

我试图通过将一个 div 包裹在两个 div 之间——centerdiv 和sidedivs 来响应地居中它。

代码：

.overmiddlediv {
  width: 100%;
  height: 150px;
  background-color: blue;
  float: left;
}
.sidedivs {
  width: 25%;
  float: left;
  padding-left: 50px;
  background-color: red;
}
.centerdiv {
  width: 50%;
  float: left;
  background-color: white
}

<div class="overmiddlediv">
  <div class="sidedivs">
    <p>Left side</p>
  </div>
  <div class="centerdiv">
    <p>This is the middle and is 50%</p>
  </div>
  <div class="sidedivs">
    <p>Right side</p>
  </div>
</div>

JSFiddle at this link shows the output 是不正确的，因为右边在左边，而它应该在白色块的右边，也应该是 25%。

我已经尝试删除.sidedivs 上的float:left 并尝试了绝对位置，但没有成功。奇怪的是，我为页脚使用了相同的代码结构，它的工作方式与它应该的完全一样 - 将每个部分分开所需的 25%-50%-25%，但在这方面它没有，我不知道我错过了什么。

See this JSFiddle，其中所有左侧元素和 p 标签都已被删除。

【问题讨论】：

你有一个类有 float:left 附加到两侧的 div，所以他们都会去左边
去掉padding或者使用* { box-sizing: border-box; }或者你应该使用calc调整25%-50%-25%的宽度分布以防止缠绕。
@Keith 谢谢，但即使我删除了这些，正如我在帖子中所说，它仍然会错误地包装它。有关示例，请参见此小提琴 - jsfiddle.net/pe8smexz/1。

标签： html css css-float box-sizing

【解决方案1】：

将此添加到 CSS 中，这样您的百分比值就不会受到填充和边距的影响/更改：

html, body {
  margin: 0;
}
* {
  box-sizing: border-box;
}

https://jsfiddle.net/hkq7ttvj/1/

【讨论】：

工作；我没有意识到默认正文有一个设定的边距，但这对了解很有帮助。我得看看边界框的作用。
@wpquestionz 阅读 this 以了解有关 border-box 的更多信息。

【解决方案2】：

你必须设置box-sizing:border-box: https://jsfiddle.net/v9f1qbng/1/ 否则宽度被添加到填充大小。

【讨论】：

【解决方案3】：

从sidedivs 中删除填充或使用：

 * { 
   box-sizing: border-box; 
 }

修改fiddle

阅读此answer 以了解有关border-box 的更多信息。

或者您应该使用calc 调整25%-50%-25% 的宽度分布以防止缠绕。

【讨论】：