我的 div 孩子不包含在父 div [重复]答案

【问题标题】：My div children are not contained in the parent div [duplicate]我的 div 孩子不包含在父 div [重复]
【发布时间】：2021-02-26 01:15:36
【问题描述】：

这是我的代码，我正在尝试将子 div 以 50% 的宽度对齐。但是它不起作用，我错过了什么？

.container{ 
  width: 900px;
  border: 2px solid red;
}
.child{
  width: 50%;
  border: 2px solid black;
  float: left;
}

<div class="container">
  <div class="child">Hello hello hello</div>
  <div class="child">Hello hello hello</div>
  <div class="child">Hello hello hello</div>
  <div class="child">Hello hello hello</div>
  <div class="child">Hello hello hello</div>
</div>

我想继续使用浮点数，因为我试图模仿另一个系统生成的 HTML。

【问题讨论】：

我想继续使用浮点数，因为我试图模仿另一个系统生成的 HTML。
您还缺少一个 clearfix。
感谢您的提示！我是 CSS 新手，这将有很大帮助

标签： html css

【解决方案1】：

#1。这个解决方案用box-sizing: border-box 为.child （很可能这是你需要的）：

.container{ 
  width: 900px;
  max-width: 100%;
  border: 2px solid red;
}
.child{
  box-sizing: border-box;
  width: 50%;
  border: 2px solid black;
  float: left;
}

<div class="container">
  <div class="child">Hello hello hello</div>
  <div class="child">Hello hello hello</div>
  <div class="child">Hello hello hello</div>
  <div class="child">Hello hello hello</div>
  <div class="child">Hello hello hello</div>
</div>

#2。这个解决方案用flexbox：

.container{ 
  display: flex;
  flex-wrap: wrap;
  width: 900px;
  max-width: 100%;
  border: 2px solid red;
}
.child{
  box-sizing: border-box;
  width: 50%;
  border: 2px solid black;
  /*float: left;*/
}

<div class="container">
  <div class="child">Hello hello hello</div>
  <div class="child">Hello hello hello</div>
  <div class="child">Hello hello hello</div>
  <div class="child">Hello hello hello</div>
  <div class="child">Hello hello hello</div>
</div>

#3。这个解决方案用grid：

.container{ 
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 900px;
  max-width: 100%;
  border: 2px solid red;
}
.child{
  width: auto;
  border: 2px solid black;
  /*float: left;*/
}

<div class="container">
  <div class="child">Hello hello hello</div>
  <div class="child">Hello hello hello</div>
  <div class="child">Hello hello hello</div>
  <div class="child">Hello hello hello</div>
  <div class="child">Hello hello hello</div>
</div>

【讨论】：

【解决方案2】：

你可以试试这个

.container{ 
  width: 900px;
  background: red;
  display: inline
}
.child{
  width: 50%;
  background: green;
  float:left
}

<div class="container">
  <div class="child">Hello hello hello</div>
  <div class="child">Hello hello hello</div>
  <div class="child">Hello hello hello</div>
  <div class="child">Hello hello hello</div>
  <div class="child">Hello hello hello</div>
</div>

【讨论】：

我想继续使用浮点数，因为我试图模仿另一个系统生成的 HTML。
我又更新了
谢谢！但为什么要显示内联？是否推荐用于 div？
将元素显示为内联元素（如）。任何高度和宽度属性都没有影响
但是这样，父 div 没有任何边框..

【解决方案3】：

原因（宽度 50% 不起作用）是您将边框 2px 添加到 div。那么 div 的宽度将是 50% + 4px（左 2px，右 2px），因此没有足够的空间在同一行中包含两个 div。

因此这里是解决方案

.child{
 width: calc(50% - 4px);
}

或者这个，如果孩子不需要调整大小

.child{
 width: 446px; /*(900/2)-4*/
}

【讨论】：

我已经编辑了 =]

【解决方案4】：

您缺少box-sizing 属性。当您使用边框时，您需要将值设置为border-box;。全局设置此属性是一个很好的做法：

*, *:before, *:after {
    box-sizing: border-box;
  }

【讨论】：

我想继续使用浮点数，因为我试图模仿另一个系统生成的 HTML。
更新了答案