Grid Alignment Ausgabe

Question

Ich habe eine Seite, die ein Raster mit 5 gleichen Spalten hat; Jede Spalte hat n Boxen unterschiedlicher Höhe.

Also der Boden dieses Gitters ist alles zerhackt, jede Reihe endet in verschiedenen Höhen.

<div class="row">...</div> 
<div class="row">...</div> 
<div class="row">...</div> 
<div class="row">...</div> 
<div class="row">...</div> 

und CSS

.row { 
    display: inline; 
    float: left; 
    width:20% 
} 

Ich möchte später mehr Boxen zu diesen Zeilen (AJAX) hinzufügen mit wieder mit

<div class="row">...</div> 
<div class="row">...</div> 
<div class="row">...</div> 
<div class="row">...</div> 
<div class="row">...</div> 

Das Problem ist, dass diese neuen Boxen nicht nur Passen Sie unter jede Zeile wie ich erwartet hatte, sondern richten Sie alle oben mit der niedrigsten Zeile aus den vorherigen Zeilen aus.

Mit welchem ​​CSS Sie umgehen ich dieses Problem?

Answer 1

Wenn Sie sich für ein „Mauerwerk“ Layout in CSS, können Sie sich Verwendung CSS Spalten

.rows { 
 
    column-count: 4; 
 
    column-gap: 1em; 
 
} 
 

 
.row { 
 
    background-color: #eee; 
 
    display: inline-block; 
 
    margin: 0 0 1em; 
 
    width: 100%; 
 
}

<div class="rows"> 
 
    <div class="row">1</div> 
 
    <div class="row">2</div> 
 
    <div class="row">3</div> 
 
    <div class="row">asdf<br> aasdf 
 
    </div> 
 
    <div class="row">4</div> 
 
    <div class="row">5</div> 
 
    <div class="row">2<br>lines</div> 
 
    <div class="row">7</div> 
 
    <div class="row">two<br> lines</div> 
 
    <div class="row">8</div> 
 
    <div class="row">9</div> 
 
    <div class="row">1</div> 
 
    <div class="row">2</div> 
 
    <div class="row">3</div> 
 
    <div class="row">asdf<br> aasdf 
 
    </div> 
 
    <div class="row">4</div> 
 
    <div class="row">two<br> lines</div> 
 
    <div class="row">6</div> 
 
    <div class="row">7<br>lines</div> 
 
    <div class="row">7.5</div> 
 
    <div class="row">8</div> 
 
    <div class="row">9</div> 
 
    <div class="row">1</div> 
 
    <div class="row">2</div> 
 
    <div class="row">3</div> 
 
</div>

Answer 2

Wenn Ihnen die Höhe nicht gefällt, verwenden Sie display: inline-block und vertical-align: top statt float left. dieses verursacht durch unterschiedliche Höhe jedes "Reihe" Elements.

.row{ 
    display: inline-block; 
    vertical-align: top; 
    width:20%; 
} 

Sie können auch jedes Element gleiche Höhe machen betrachten entweder flex oder Javascript in denen verwenden, können Sie überprüfen, welche div die höchste Höhe haben und es auf alle Elemente.

, wenn Sie wollen, dass es unterschiedliche Höhe haben und wollen, dass es um die Lücke zu füllen, lesen Sie bitte diese Frage

CSS Floating Divs At Variable Heights

Answer 3

.multiple-column{ 
 
    list-style: none; 
 
    padding: 0; 
 

 
    -webkit-column-count: 3; 
 
    -moz-column-count: 3; 
 
    column-count: 3; 
 
    -webkit-column-gap: 20px; 
 
    -moz-column-gap: 20px; 
 
    column-gap: 20px; 
 
} 
 
.multiple-column li{ 
 
    background: gray; 
 
    margin-bottom:10px; 
 
}

<ul class="multiple-column"> 
 
    <li style="height: 100px">A</li> 
 
    <li style="height: 200px">B</li> 
 
    <li style="height: 150px">C</a></li> 
 
    <li style="height: 120px">D</li> 
 
    <li style="height: 120px">E</li> 
 
    <li style="height: 60px">F</li> 
 
</ul>

Der Browser muss die CSS3 unterstützen.