如何防止div内的元素溢出？

Question

当他们到达div的末尾时，我试图制作这些红色方块，从上方开始新的列并继续向下等等......但是当他们到达DIV的结束时我知道这听起来很傻但我正在为一个学校项目做点什么，谢谢..

<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>

{{1}}

Answer 1

display: flex是您的朋友，其设置如下所示......

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这是使用CSS列的另一种解决方案。 column-count确定列数，具体取决于它们的数量。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用flex执行此操作：

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;