为什么子div溢出父容器？ [英] Why are child divs overflowing the parent container?

问题描述

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

我不确定这可能与我的边框有什么关系。

所以，这实际上是我要去的设计。

这是我得到的结果...

这里是我使用的代码...

< pre class =snippet-code-css lang-css prettyprint-override> .main {width：100％;身高：100％; border：2px solid＃73AD21;}。titleContainer {width：100％;身高：10％;边框：2px纯黄色;向左飘浮; display：inline-block;}。title {width：100％;身高：100％;边框：2px纯蓝色; float：left;} .graphContainer {position：relative; margin-right：25px;宽度：100％;身高：90％;边框：2px纯黄色;向左飘浮; display：inline-block;}。graph {width：25％;身高：25％;边框：2px纯色紫色;向左飘浮; display：inline-block;}。graphImage {width：100％;身高：90％; border：2px solid blue;}。graphTitle {width：100％;身高：10％; border：2px solid blue;}

< div class = 主 > < 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：border-box; } 
  

使用 <$ c













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

使用内容框（默认值），框的长度–宽度或高度 - ndash;仅包含内容框。

在您的代码中，25％的宽度框正在打包，因为25％仅适用于 content 部分。但是，每个元素周围都有一个2px边框。这意味着每个盒子的宽度实际上是：25％+ 4px。乘以4即可：

  25％+ 25％+ 25％+ 25％+ 4px + 4px + 4px + 4px = 100％+ 16px> 100％=包装
  

为了解决这个问题，CSS提供了第二种计算长度的方法：<$ c使用边界框> $ c> box-sizing：border-box 。

计算包括内容，填充和边框。因此：

  25％+ 25％+ 25％+ 25％+ 4px + 4px + 4px + 4px = 100％（4px是计入25％）
  

进一步阅读：

• MDN box-sizing


• CSS-Tricks box-sizing


• 学习CSS布局 box-sizing


• Paul Irish * {Box-sizing：Border-box} FTW a>

I have four 25% width divs not fitting inside a 100% width div.

I'm unsure if this may have something to do with my borders or something.

So this is essentially the design I'm going for..

This is the result I am getting...

Here is the code I am using...

.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>

Any help would be great..

Cheers

解决方案

To make your layout work add this line of code:

* { box-sizing: border-box; }

jsFiddle demo

---

The box-sizing property, and the difference between content-box and border-box.

Here's an illustration of the CSS box model:

With the box-sizing property, you have two options for calculating the length of an element.

The property takes two values: content-box and border-box.

With content-box (the default value), the length of the box – either width or height – includes only the content box. Neither the padding, border or margin are factored into the calculation.

In your code, the 25%-width boxes are wrapping because the 25% is applying only to the content section. But you also have a 2px border around each element. This means that the width of each box is actually: 25% + 4px. Multiply that by four and you have:

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

To counter this effect, CSS offers a second method for calculating length: box-sizing: border-box.

With border-box the calculation includes the content, padding and border. Hence:

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

Further reading:

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

这篇关于为什么子div溢出父容器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！