gauche-align dernière galerie rangée

Question

J'ai une galerie d'image qui ressemble à:

Le code ressemble à:

<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> 

Le CSS ressemble:

.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; 
} 

J'aime comment il s'est avéré, mais je voudrais IMG_117 pour aligner sous IMG_114, tout en gardant la zone verte centrée et le contenu dans le div centré ... N ne sachez pas comment aligner cette div sans décentrer quelque chose d'autre.

Je pensais que cela pourrait être un tweak rapide à mon css ou peut-être quelques jQuery pour ajouter deux colonnes supplémentaires à la ligne IMG_117. Le problème que je vois est que c'est un contenu dynamique et je ne saurai pas toujours combien sont dans la dernière rangée ... pourrait être un, deux, ou trois et s'il y a un certain jQuery il faudrait vérifier et voir combien les éléments sont dans la ligne, puis ajoutez les colonnes manquantes. Je ne sais pas quelle approche est la plus facile ou s'il y a une meilleure solution là-bas ... est-ce que quelqu'un a des idées ou quelqu'un peut-il me diriger dans la bonne direction?

Merci,
Josh

Answer 1

Vous pouvez utiliser la solution flexbox pour une disposition plus fluide et flexible voir la solution au codepen ci-dessous.

.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

d'abord remplacer tous les id = "carrés" class = "carrés" en html et #squares avec .squares

id - destinés à être identifiant unique de l'élément DOM sur la page

puis ajoutez à votre css:

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