Bildergalerie nach bestimmten Elementen seltsam anzeigen

Question

Ich habe eine einfache image gallery aus einer geordneten Liste gemacht. Das Problem mit den Bildern ist, dass sie nicht gleich groß sind und der 4. bzw. 7. den Fluss unterbricht und sie merkwürdig dargestellt werden.

konnte ich dieses Problem beheben mit

#wrapper li:nth-child(5n) 
    { 

     clear: left; 
     } 

    #wrapper li:nth-child(7n) 
    { 

     clear: left; 
     } 

verwenden, aber es ist sehr schwer zu halten, wenn ich mehr Fotos in der Galerie hinzufügen. Was wäre eine bessere Lösung für die Bilder, ohne dass die Elemente aus dem normalen Fluss herausgehen? Vielen Dank!

Answer 1

Stil die li Tags für Position, nicht die Bilder in ihnen ...

#wrapper ol li { 
    float: left; 
    display: inline-block; 
     width: 50%; 
} 

Dann können Sie die ungeraden li Elemente zielen und klar die linke schwimmt ....

#wrapper ol li:nth-child(odd) { 
    clear: left; 
} 

Updated Fiddle

Grob gesagt, das funktioniert mit zwei Bildern pro Zeile ... Wenn Sie Reihen von 3 oder mehr Bildern haben, dann muss das N-Kind eingestellt werden d. (See here)