Vertikale Ausrichtung funktioniert nicht

Question

Ich habe mehr als 3 Kindknoten und ein einzelnes Elternteil div. Ich möchte die div wie ein Ziegel ausrichten. Aber das Div positioniert sich nicht richtig. Das Kind verbraucht unerwünschten Raum zwischen zwei Divs.

Jedes Kind div haben unterschiedliche Höhen, so display: flex Eigenschaft ist nicht im Elternteil. Auch versucht mit column-count Eigenschaft in der Eltern-Div und es funktioniert nicht richtig in Chrom.

Siehe Demo

.container { 
 
    border: 1px black solid; 
 
    overflow: hidden; 
 
    vertical-align: top; 
 
} 
 

 
.small { 
 
    float: left; 
 
    width: 100px; 
 
    border: 1px black solid; 
 
    background: aliceblue; 
 
}

<div class="container"> 
 
    <div class="small">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</div> 
 
    <div class="small">It has survived not only five centuries.</div> 
 
    <div class="small">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</div> 
 
    <div class="small">more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</div> 
 
    <div class="small">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical.</div> 
 
    <div class="small">Latin literature from 45 BC, making it over 2000 years old.</div> 
 
    <div class="small">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.</div> 
 
</div>

Answer 1

die Sie interessieren sollte es

.container{ 
    border: 1px black solid; 
    overflow: hidden; 
    vertical-align: top; 
    display:flex; 
} 

.small{ 
    float: left; 
    width: 100px; 
    border: 1px black solid; 
    background: aliceblue; 
    align-self: center; 
} 

http://jsfiddle.net/8g9cycs8/

Answer 2

Sie CSS-Masonry layo verwenden können, arbeiten ut. Sehen Sie diesen Link: http://w3bits.com/css-masonry/

Answer 3

Bitte verwenden Sie flex box es wird das Problem sehr leicht lösen.

.Container { 
    display: flex; 
    justify-content: flex-start; 
}