当它们到达div的末尾时,我正在尝试制作这些红色正方形,从上方开始新的列,然后继续向下等等。...但是当它们到达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>

最佳答案

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



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

关于html - 如何防止div中的元素溢出?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48481536/

10-12 06:42
查看更多