防止包装元素包裹

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不分裂？

Example fiddle

Answer 1

通过将display:inline-block添加到.block。

来修复

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以尝试这个：

body {
    background-color:#EAEDF4;
    overflow-x:hidden;
}
.block {
    background-color:white;
    width:330px;
    margin-bottom:25px;
    display:inline-block;
}
#content {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count:3;
    display:block;
    margin-top:50px;
}

DEMO FIDDLE