div不会留在容器中[重复]答案

【问题标题】：divs won't stay in container [duplicate]div不会留在容器中[重复]
【发布时间】：2021-06-11 00:18:26
【问题描述】：

这些 div 具有显示内联块，高度和宽度为 50%，并且没有边距，但它们不断从容器中掉落。出了什么问题，我该如何解决？

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gameboard {
  border: 5px solid black;
  width: 300px;
  height: 300px;
  display: flex;
  flex-wrap: wrap;
}

.box {
  height: 50%;
  width: 50%;
  border: 1px solid black;
  display: inline-block;
  margin: 0;
}

<div class="gameboard">
  <div class="box left"></div>
  <div class="box right"></div>
  <div class="box left"></div>
  <div class="box right"></div>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

正如@neatlysliced 提到的，边框的计算不计算在内。您已应用 1px 边框，因此增加了 2px（1px 右边框 + 1px 左边框）的宽度。你可以简单地添加

box-sizing: border-box;

到盒子类。 box-sizing：border-box 属性将计算框的宽度，包括赋予该元素的任何填充或边框。

这是工作演示：

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gameboard {
  border: 5px solid black;
  width: 300px;
  height: 300px;
  display: flex;
  flex-wrap: wrap;
}

.box {
  height: 50%;
  width: 50%;
  border: 1px solid black;
  display: inline-block;
  margin: 0;
  box-sizing: border-box;
}

<div class="gameboard">
  <div class="box left"></div>
  <div class="box right"></div>
  <div class="box left"></div>
  <div class="box right"></div>
</div>

【讨论】：

@neatlysliced 你在说什么 unitnend 副作用？几乎没有。 box-sizing 只是确定是否应该使用边框来计算宽度。最后，它们是更清洁的解决方案，因为如果您更改 broder 厚度，您无需进行计算，也无需修复多条线。
@natlysliced 我已经明确提到边框框将计算宽度，包括应用于它的任何边框或填充。我不明白你想通过说明“副作用”来指出什么。 @tacoshy 谢谢。这是完美的答案。

【解决方案2】：

根据您的框尺寸，边框宽度超过 50%。因此，每个框占用 50% + 2px（左侧边框为 1px，右侧边框为 1px，顶部和底部边框的高度也类似）。幸运的是，我们可以使用内置的 calc() 来进行数学运算，它会很合适。您想要的宽度将是 50% 减去边框的总和 2px。

编辑添加：如果您正在调整内容框大小，如果您添加了填充，则可能需要调整 calc() 以适应额外的填充。

      <style>

         body{
          margin: 0;
          height: 100vh;
          display: flex;
             align-items: center;
          justify-content: center;
            }
     .gameboard{
       border: 5px solid black;
         width: 300px;
           height: 300px;
         display: flex;
       flex-wrap: wrap;

     }

     .box{

      height: calc(50% - 2px);
       width: calc(50% - 2px);
       border: 1px  solid black ;
       display: inline-block;
       margin: 0;
      
         }

       </style>

     <!DOCTYPE html>
      <html lang="en">
         <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Document</title>


   </head>
    <body>
     <div class="gameboard">
          <div class="box left"></div>
           <div class="box right"></div>
          <div class="box left"></div>
         <div class="box right"></div>
    </div>


</body>
</html>

【讨论】：

使用calc funtion 很麻烦。您需要计算填充和边框。如果您更改其中任何一个，则需要调整多个值。最简单的解决方案是使用box-sizing-borderbox;。默认情况下，它将宽度计算更改为在总宽度中包含填充和边框。您使解决方案过于复杂，因为不存在副作用。
将 box-sizing 从 content-box 更改为 border-box 没有任何区别。它根本没有影响。它唯一做的就是content box 使用内容的宽度，border-box 使用content + padding + border) 的宽度。不知道为什么你仍然在谈论问题或副作用。它不会产生副作用。试着提一个可能发生的“副作用”
box-sizing 没有被继承...box-sizing 的默认值是content-box 而不是inherit
@tacoshy 我的错！老实说，我忘记了这一点，我通常设置一次就忘记了。感谢您的耐心和亲切的教导。原发帖人应更改正确答案。