css瀑布流

 像这样

 html

  <div class="bigbox">
    <div class="box1">aa
      <br>
      caaaaaaaaaaaaaaaaaa
    </div>
    <div class="box2">cc
    </div>
    <div class="box3">bb
      <br>aaaaaaaa
      <br>dddddddd
    </div>
    <div class="box4">dd</div>
  </div>

css 

.bigbox {
      column-count: 2;
      column-gap: 0px;
    }
    .box1,
    .box2,
    .box3,
    .box4 {
      break-inside: avoid;
    }
    .box1 {
      background-color: aliceblue;
    }
    .box2 {
      background-color: aqua;
    }
    .box3 {
      background-color: black;
    }
    .box4 {
      background-color: blueviolet;
    }

注意在子元素里添加break-inside：avoid 不折行 不然有可能出现这样元素断行

 关于break-inside看这个CSS columns分栏布局和break-inside属性_Wscthhh的博客-CSDN博客