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

Question

出于某种原因，如果元素未 div在列之间准确排列，它们会以奇怪的方式断开。

在此处查看视觉表示：

CSS 根 div

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

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

CSS columns not stacking elements correctly when elements are not divided exactly between columns

css

multiple-columns

calculated-columns