Css 使用列宽属性时防止拆分内部div

我试图创建一个多列布局，同时仍然保持“内部div”在一起。 LineHeight属性可以很好地将div堆叠在彼此的顶部，但可以将内部div一分为二

柱的高度不必完全相同

任何帮助都将不胜感激

<div class="c">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
</div>

.c {
  -webkit-column-width:250px; -webkit-column-gap:10px;
  -moz-column-width:250px; -moz-column-gap:10px;
  column-width:250px; column-gap:10px;
  color:white;
}

.c > div:nth-child(1) { height:100px; background-color:grey; }
.c > div:nth-child(2) { height:200px; background-color:blue; }
.c > div:nth-child(3) { height:100px; background-color:red; }
.c > div:nth-child(4) { height:100px; background-color:yellow; }
.c > div:nth-child(5) { height:100px; background-color:black; }
.c > div:nth-child(6) { height:100px; background-color:orange; }

A.
B
C
D
E
F
c{
-webkit列宽：250px；-webkit列间距：10px；
-moz列宽：250px；-moz列间距：10px；
列宽：250px；列间距：10px；
颜色：白色；
}
.c>div:n子级（1）{高度：100px；背景色：灰色；}
.c>div:n子级（2）{高度：200px；背景色：蓝色；}
.c>div:n子级（3）{高度：100px；背景色：红色；}
.c>div:n子（4）{高度：100px；背景色：黄色；}
.c>div:n子级（5）{高度：100px；背景色：黑色；}
.c>div:n子（6）{高度：100px；背景色：橙色；}

见下面的例子 您必须添加

-webkit-column-break-inside: avoid;

对于每个

div

元素

更新的小提琴：