html - 我的 div 子级不包含在父级 div 中

Question

这是我的代码，我正在尝试将子 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。

标签： htmlcss

Answer 1

#1。这个解决方案与box-sizing: border-boxfor .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>