当列之间没有精确划分元素时，CSS列不能正确堆叠元素

Question

由于某些原因，如果元素没有在列之间精确划分，它们会以奇怪的方式被中断。

请在此处查看视觉表示：

root div的CSS

-webkit-column-gap: 10px;
-moz-column-gap: 10px;
 column-gap: 10px;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
float: none;
width: 100%;

元素CSS

width: 100%;
height: 206px;

建议的解决方案here对我不起作用：/

Answer 1

您可以尝试将显示重置为子项，以避免将其显示到不同的列中：

.root {
  -webkit-column-gap: 10px;
  -moz-column-gap: 10px;
  column-gap: 10px;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}

.child {
  width: 100%;
  height: 206px;
  background: turquoise;
  display: inline-block;/* here layout reset , should do the trick in most browser, feed back appreciated :)*/
}

<div class="root">
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
  <div class="child">
  </div>
</div>