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％。

我已经玩过去除了float:left上的.sidedivs并尝试了一个绝对的位置，但没有成功。奇怪的是，我已经使用了相同的代码结构作为页脚，它的工作原理与它应该完全相同 - 将每个部分分开所需的25％-50％-25％，但就此而言，它不是，我是不知道我错过了什么。

See this JSFiddle已删除所有左侧元素和p标记。

Answer 1

将此添加到CSS中，以便您的百分比值不受填充和边距的影响/改变：

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的更多信息。

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

Right Div错误地对齐页面左25％

3 个答案: