Html 防止柱元素缠绕

我有3列，但列被拆分并在顶部重新启动

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

CSS

我怎样才能让大家不分开

---

通过将

显示：内联块添加到.block来修复


正文{
背景色：#EAEDF4；
溢出x：隐藏；
}
#内容{
-moz列数：3；
-webkit列数：3；
列数：3；
显示：块；
边缘顶部：50px；
}
.街区{
背景色：白色；
宽度：330px；
边缘底部：25px；
显示：内联块；
}
格林先生{
背景：浅绿色；
高度：400px；
}
蓝先生{
背景：浅蓝色；
高度：500px；
}
黄先生{
背景：浅黄色；
高度：600px；
}

您可以试试这个：

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

请给我们展示一个jsfiddle中的示例。这些列适用于文本，但不适用于div。也许使用float divs或JQuery砖石插件是值得的。对不起，我踩了你的编辑。我现在就让开。
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;
}