右 Div 错误地左对齐 25% 的页面

Question

我试图通过将一个 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 标签。

Answer 1

将此添加到 CSS，这样您的百分比值就不会 influenced/altered 通过填充和边距：

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

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

Answer 2

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

Answer 3

删除 sidedivs 中的填充或使用：

 * { 
   box-sizing: border-box; 
 }

已修订 fiddle

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

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

右 Div 错误地左对齐 25% 的页面

Right Div Incorrectly Aligns Left 25% of Page

html

css

css-float

box-sizing