div不会留在容器中[重复]
Posted
技术标签:
【中文标题】div不会留在容器中[重复]【英文标题】：divs won't stay in container [duplicate] 【发布时间】：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>【问题讨论】：
【参考方案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 我的错！老实说，我忘记了这一点，我通常设置一次就忘记了。感谢您的耐心和亲切的教导。原发帖人应更改正确答案。以上是关于div不会留在容器中[重复]的主要内容，如果未能解决你的问题，请参考以下文章