html - 如何防止div里面的元素溢出？

Question

我试图在它们到达 div 的末尾时制作这些红色方 block ，从上方开始新的列并继续向下等等......但是当它们到达 DIV 的末尾时我知道这听起来很愚蠢但我正在为一个学校元素做 iit，谢谢 ..

.umbrella {
  width: 500px;
  height: 500px;
  background: grey;
}

.square {
  background: red;
  width: 100px;
  height: 50px;
  margin: 5px;
}

<div class="umbrella">
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
</div>

Answer 1

display: flex 是你的 friend ，设置如下...

.umbrella {
  width: 500px;
  height: 500px;
  background: grey;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  }

.square {
  background: red;
  width: 100px;
  height: 50px;
  margin: 5px;
}
.square.x {
  width: 150px;
  background: green;
}

<div class="umbrella">
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square x"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square x"> Hello1</div>
  <div class="square"> Hello1</div>
</div>

这是另一个使用 CSS 列的解决方案。 column-count 确定列数，根据该数字它们将同样宽。

.umbrella {
  width: 500px;
  height: 500px;
  background: grey;
  column-count: 2;
  }

.square {
  background: red;
  width: 100px;
  height: 50px;
  margin: 5px;
}
.square.x {
  width: 150px;
  background: green;
}

<div class="umbrella">
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square x"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
  <div class="square"> Hello1</div>
</div>