Left-align letzte Galerie Reihe

Question

Ich habe eine Bildergalerie, die wie folgt aussieht:

Der Code sieht so aus:

<div class="wrapper"> 
    <div id="squares"> 
     <a href="yourlinkhere1.php"><img src="images/galleryimage1.jpg"></a> 
     <h5>IMG_114</h5> 
    </div> 
    <div id="squares"> 
     <a href="yourlinkhere2.php"><img src="images/galleryimage2.jpg"></a> 
     <h5>IMG_115</h5> 
    </div> 
</div> 

Die CSS wie folgt aussieht:

.wrapper { 
    background: #ff0000; 
    text-align: center; 
} 

#squares { 
    background: #00ff00; 
    display: inline-block; 
    vertical-align: top; 
    width: 300px; 
} 

#squares img { 
    max-height: 200px; 
    width: auto; 
} 

#squares h5 { 
    margin: 20px 0; 
} 

Ich mag wie es sich herausgestellt hat, aber ich möchte IMG_117 unter IMG_114 ausrichten, während der grüne Bereich zentriert bleibt und der Inhalt im div zentriert ... N ot sicher, wie man das div nach links ausrichten kann, ohne etwas anderes zu zentrieren.

Ich dachte, dies könnte eine schnelle zwicken zu meinem CSS oder vielleicht einige jQuery, um zwei weitere Spalten in die IMG_117 Zeile hinzuzufügen. Das Problem, das ich sehe, ist dynamischer Inhalt und ich werde nicht immer wissen, wie viele in der letzten Reihe sind ... kann eins, zwei oder drei sein, und wenn es etwas jQuery gibt, müsste es prüfen und sehen, wie viele Elemente befinden sich in der Zeile und fügen dann die fehlenden Spalten hinzu.

Ich bin mir nicht sicher, welcher Ansatz der einfachste ist oder ob es eine bessere Lösung gibt ... hat jemand irgendwelche Ideen oder kann mir jemand in die richtige Richtung zeigen?

Danke,
Josh

Answer 1

Sie können die flexbox-Lösung für ein flüssigeres und flexibleres Layout verwenden, siehe die Lösung im untenstehenden Codepen.

.wrapper { 
    background: #ff0000; 
    text-align: center; 
    width: 100%; 
    height:auto; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-wrap: wrap; 
    flex-wrap: wrap; 
    padding: 0 5% 0; 
} 

Codepen

https://codepen.io/ahmedi/pen/KvVgQW 

Answer 2

zunächst alle id = "Quadrate" mit class = "Quadrate" in html und #squares mit .squares

id ersetzen - um eindeutige Kennung gemeint das DOM-Elements auf der Seite

dann zu Ihrem CSS hinzufügen:

.squares { 
    float: left; /* all elements will tend to left*/ 
} 
.wrapper { 
    clear: both; /* reset rules of floating for the next elements*/ 
}