防止列元素换行

Question

I have 3 columns but the columns split up and restart at the top.

(I marked the relevant divs red)

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

How can I make it so the divs don't split up?

Example fiddle

Answer 1

Fixed by adding display:inline-block to .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> 

Answer 2

you can try this one:

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