1

我试图通过将一个 div 包裹在两个 div 之间——thecenterdiv和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 显示了输出，但它不正确，因为右侧在左侧，而它应该在白色块的右侧并且也应该是 25%。

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

请参阅此 JSFiddle，其中已删除所有左侧元素和 p 标记。

4

3 回答 3

2

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

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

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

于 2016-09-30T17:05:45.010 回答
2

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

于 2016-09-30T17:07:03.127 回答
1

从sidedivs或使用中删除填充：

 * { 
   box-sizing: border-box; 
 }

修改后的小提琴

阅读此答案以了解更多信息border-box。

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

于 2016-09-30T17:09:29.170 回答