wie Bilder nebeneinander angezeigt werden n zwei Spalten mit unterschiedlichen Höhen

Question

Ich habe Probleme mit dem folgenden. Ich möchte eine Bildergalerie in zwei Spalten anzeigen können. Die Bilder haben unterschiedliche Höhen. Ich habe versucht, die Mauermethode mit der Anzahl der Spalten zu verwenden. Das funktioniert gut, aber das Problem ist, weil die Website reaktionsbereit sein muss, sobald ich die Größe ändere, zeigt alles in 1 Spalte an. Aber die Bilder sind nicht in der gleichen Reihenfolge, weil ich Spalten anstelle von Zeilen verwende ...

das ist also der Code, den ich

.left { 
     float: left; 
     width: 45%; 
     margin: 1px; 
    } 
    .right { 
     float: right; 
     width: 45%; 
    } 

    .test{ 
     margin-bottom: 10px; 

    } 
    .test:after { 
     clear: left; 

    } 
    img { 
     max-width: 100%; 
     height: auto; 
    } 

<div class="container"> 
    <div class="left"> 
     <img src="1.jpg" alt=""> 
    </div> 
    <div class="left test"> 
     <img src="2.jpg" alt=""> 
    </div>    

    <div class="left"> 
     <img src="3.jpg" alt=""> 
    </div> 
    <div class="left test"> 
     <img src="4.jpg" alt=""> 
    </div>    

    <div class="left"> 
     <img src="5.jpg" alt=""> 
    </div> 
    <div class="left test"> 
     <img src="6.jpg" alt=""> 
    </div>    

    <div class="left"> 
     <img src="7.jpg" alt=""> 
    </div> 
    <div class="left test"> 
     <img src="8.jpg" alt=""> 
    </div> 
    </div> 

die Frage, die ich unten im Bild gezeigt habe, verwenden.

Also Bild 7 sollte unter Bild 5 angezeigt werden und Bild 8 sollte angezeigt werden, wo Bild 7 derzeit ist.

Was mache ich falsch? Muss nur CSS sein, kein JS

Wenn ich Spaltenanzahl verwende, dann ist das Problem, wenn es sich um eine Antwort handelt. Es werden Bilder in der folgenden Reihenfolge angezeigt: 1, 3, 5, 8, 2, 4, 6 , 7 und nicht mehr als 1, 2,3 ....

Dank

Answer 1

deaktivieren Sie nicht die Schwimmer auf :after aber auf den Elementen themself.

Beispiel

.test:nth-of-type(2n+1) { 
    clear: left; 
}