当元素未在列之间准确划分时，CSS 列无法正确堆叠元素

Question

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

请在此处查看视觉表示:

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