Comment aligner à gauche la dernière ligne d'une grille de blocs en ligne centrée en utilisant uniquement CSS ?

Dernière ligne alignée à gauche dans une grille d'éléments centrée

Cette question aborde le défi d'aligner la dernière ligne d'une grille d'éléments de bloc en ligne vers la gauche tout en conservant l'alignement centré de l'ensemble de la grille. L'utilisateur recherche spécifiquement une solution CSS qui n'implique pas de Flexbox ni de balisage supplémentaire.

Voici une solution de grille adaptative qui répond aux exigences :

html, body {
    margin:0;
    padding:0;
}
#container{
    font-size:0;
    margin:0 auto;
    width:1000px;
}
.block {
    font-size:20px;
    width: 150px;
    height: 150px;
    margin:25px;
    background: gold;
    display:inline-block;
}

@media screen and (max-width: 430px) {
    #container{
        width:200px;
    }
}

@media screen and (min-width: 431px) and (max-width: 630px) {
   #container{
        width:400px;
    }
}
@media screen and (min-width: 631px) and (max-width: 830px) {
   #container{
        width:600px;
    }
}
@media screen and (min-width: 831px) and (max-width: 1030px) {
   #container{
        width:800px;
    }
}

<div>

Dans cette solution , les éléments de bloc en ligne sont placés à l'intérieur d'un conteneur de largeur fixe. À mesure que la largeur de la fenêtre du navigateur change, le conteneur se redimensionne tout en conservant sa position centrée. Lorsque la largeur du conteneur devient trop étroite pour accueillir tous les éléments, ils commencent à passer à la ligne suivante. La dernière ligne est automatiquement alignée à gauche en raison du comportement par défaut des éléments de bloc en ligne.

Lien de démonstration :

[Démo de grille adaptative](Insérer le lien de démonstration ici )

En redimensionnant la fenêtre du navigateur, vous pouvez observer comment la grille s'adapte et la dernière ligne reste alignée à gauche dans tous les cas. scénarios.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!