像这样
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博客