为什么子div溢出父容器？

Question

我有四个25％宽度的div不适合100％宽度div。

我不确定这是否与我的边界或某事有关。

所以这基本上就是我要去的设计..

这是我得到的结果......

以下是我正在使用的代码......

.main {
  width: 100%;
  height: 100%;
  border: 2px solid #73AD21;
}

.titleContainer {
  width: 100%;
  height: 10%;
  border: 2px solid yellow;
  float: left;
  display: inline-block;
}

.title {
  width: 100%;
  height: 100%;
  border: 2px solid blue;
  float: left;
}

.graphsContainer {
  position: relative;
  margin-right: 25px;
  width: 100%;
  height: 90%;
  border: 2px solid yellow;
  float: left;
  display: inline-block;
}

.graph {
  width: 25%;
  height: 25%;
  border: 2px solid purple;
  float: left;
  display: inline-block;
}

.graphImage {
  width: 100%;
  height: 90%;
  border: 2px solid blue;
}

.graphTitle {
  width: 100%;
  height: 10%;
  border: 2px solid blue;
}

<div class="main">
  <div class="titleContainer"></div>
  <div class="graphsContainer">
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
  </div>
</div>

任何帮助都会很棒......

干杯

Answer 1

要使布局工作，请添加以下代码：

* { box-sizing: border-box; }

jsFiddle demo

box-sizing属性，以及content-box和border-box之间的差异。

以下是CSS box model：

的说明

使用box-sizing属性，您有两个计算元素长度的选项。

该属性有两个值：content-box和border-box。

使用content-box（默认值），框的长度（宽度或高度）仅包含内容框。填充，边界或边距都不计算在内。

在您的代码中，25％-width框是包装的，因为25％仅适用于内容部分。但是每个元素周围也有一个2px的边框。这意味着每个盒子的宽度实际上是：25％+ 4px。将它乘以四，你就得到了：

25% + 25% + 25% + 25% + 4px + 4px + 4px + 4px = 100% + 16px > 100% = wrapping

为了抵消这种影响，CSS提供了另一种计算长度的方法：box-sizing: border-box。

使用border-box计算包括内容，填充和边框。因此：

25% + 25% + 25% + 25% + 4px + 4px + 4px + 4px = 100% (4px is factored into the 25%)

进一步阅读：

• MDN box-sizing
• CSS-Tricks box-sizing
• Learn CSS Layout box-sizing
• Paul Irish * { Box-sizing: Border-box } FTW

Answer 2

在你的风格中使用它可以帮助你

*
{
    box-sizing:border-box;
}

Answer 3

* {
  box-sizing: border-box;
}
/* you missed this property*/

.main {
  width: 100%;
  height: 100%;
  border: 2px solid #73AD21;
}
.titleContainer {
  width: 100%;
  height: 10%;
  border: 2px solid yellow;
  float: left;
  display: inline-block;
}
.title {
  width: 100%;
  height: 100%;
  border: 2px solid blue;
  float: left;
}
.graphsContainer {
  position: relative;
  margin-right: 25px;
  width: 100%;
  height: 90%;
  border: 2px solid yellow;
  float: left;
  display: inline-block;
}
.graph {
  width: 25%;
  height: 100px;
  /* gave it for demo purpose*/
  border: 2px solid purple;
  float: left;
  display: inline-block;
}
.graphImage {
  width: 100%;
  height: 90%;
  border: 2px solid blue;
}
.graphTitle {
  width: 100%;
  height: 10%;
  border: 2px solid blue;
}

<div class="main">
  <div class="titleContainer">
  </div>
  <div class="graphsContainer">
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
    <div class="graph"></div>
  </div>

</div>

您忘记声明box-sizing财产。你可以阅读 Box Sizing here 伙计，你可以检查，SO本身是什么盒子大小。 What is use of box sizing in CSS