防止列元素包裹

Question

我有 3 列，但这些列分开并在顶部重新开始。

（我将相关div标记为红色）

CSS

.block
{
    background-color:white;
    width:330px;
    margin-bottom:25px;
    display:block;
}

#content
{
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count:3;
    display:block;
    margin-top:50px;
}

我怎样才能使 div 不分裂？

小提琴示例

Answer 1

display:inline-block通过添加到 .block来修复。

body {
  background-color: #EAEDF4;
  overflow-x: hidden;
}
#content {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
  display: block;
  margin-top: 50px;
}
.block {
  background-color: white;
  width: 330px;
  margin-bottom: 25px;
  display: inline-block;
}
.green {
  background: lightgreen;
  height: 400px;
}
.blue {
  background: lightblue;
  height: 500px;
}
.yellow {
  background: lightyellow;
  height: 600px;
}

<div id="content">
  <div class="block blue"></div>
  <div class="block green"></div>
  <div class="block yellow"></div>
  <div class="block green"></div>
  <div class="block yellow"></div>
  <div class="block blue"></div>
  <div class="block blue"></div>
  <div class="block yellow"></div>
  <div class="block blue"></div>
  <div class="block blue"></div>
</div>