Top-to-Bottom, von links nach rechts Stapeln von variabler Höhe, mit fester Breite divs in 2 oder mehr Spalten

Question

I variabler Höhe aber fester Breite divs innerhalb eines fest Layout wollen Breite und höhenvariable Container, so dass die Child Divs aufeinander gestapelt in einem gemauerten Muster aussehen und 2 oder mehr Spalten nehmen.

Hier ist, was ich will:

Und hier ist, was ich mit Schwimmern oder FlexBox erhalten:

Hier ist der Code Stift: http://codepen.io/anon/pen/xOLwVJ

<div class="container"> 
    <div class="item"> 
    </div> 
    <div class="item" style="height:250px;"> 
    </div> 
    <div class="item" style="height:150px;"> 
    </div> 
    <div class="item" style="height:200px;"> 
    </div> 
    <div class="item" style="height:180px;"> 
    </div> 
</div> 

Dieser Code bezieht sich nur auf CodePen, hier nicht für die 2 Bilder.

Weder Flexbox noch Floats scheinen zu funktionieren. Am nächsten komme ich dazu, dass es funktioniert. Ich benutze Spalten, aber in der Mitte schneiden sie die Kind-Divs - das ist ok für Text, aber nicht so für tatsächliche Boxen.

Ich möchte HTML/CSS nur Lösung ohne JavaScript.

Answer 1

Es stellt sich heraus, dass es mit CSS-Spalten immerhin möglich ist. Der Trick bestand darin, display:inline-block auf untergeordnete Elemente festzulegen, um zu verhindern, dass untergeordnete Spalten bei Spaltenumbrüchen in der Mitte abgeschnitten werden.

<div class="container"> 
    <div class="item"> 
    </div> 
    <div class="item" style="height:250px;"> 
    </div> 
    <div class="item" style="height:150px;"> 
    </div> 
    <div class="item" style="height:200px;"> 
    </div> 
    <div class="item" style="height:180px;"> 
    </div> 
</div> 

Und die CSS:

.container { 
    margin: 0 auto; 
    width:600px; 
    background:#ddd; 
    display: block; 
    -webkit-column-count: 2; 
    -moz-column-count: 2; 
    column-count: 2; 
} 
    .item { 
    margin:10px; 
    background:red; 
    width:270px; 
    height:100px; 
    display:inline-block; /* this is to prevent div being cut in the middle when it flows onto the next column */ 
    } 

Codepen: http://codepen.io/anon/pen/GqvoBO

Answer 2

dies ist jsfiddle für Ihre Frage, die ich hoffe, dass dies für Sie nützlich ist (https://jsfiddle.net/ahe128/anhw21rj/)

<div id="main"> 
<div id="coloumn1"> 
    <div id="row1_1"> 
    </div> 
    <div id="row1_2"> 
    </div> 
    <div id="row1_3"> 
    </div> 
</div> 
<div id=coloumn2> 
<div id="row2_1"> 
    </div> 
    <div id="row2_2"> 
    </div> 
</div> 
</div> 

#main{ 
    height:500px; 
    width:500px; 
    border:1px solid black; 
    margin:10px; 
} 
#coloumn1{ 
    height:400px; 
    width:200px; 
    float:left; 
margin:10px; 
    border:2px solid black; 
} 
#row1_1{ 
    height:150px; 
    width:150px; 
    border:1px solid black; 
    margin:10px; 
} 
#row1_2{ 
    height:100px; 
    width:150px; 
margin:10px; 
border:1px solid black; 
} 
#row1_3{ 
    height:50px; 
    width:150px; 
margin:10px; 
border:1px solid black; 
} 
#coloumn2{ 
    height:400px; 
    width:200px; 
    float:left; 
    border:2px solid black; 
    margin:10px; 
} 
#row2_1{ 
    height:200px; 
    width:150px; 
    border:1px solid black; 
    margin:10px; 
} 
#row2_2{ 
    height:150px; 
    width:150px; 
margin:10px; 
border:1px solid black; 
}