Comment centrer le conteneur et aligner à gauche les éléments enfants avec des colonnes réactives ?

Conteneur d'alignement central et éléments enfants d'alignement à gauche

Votre question vise à afficher un nombre dynamique d'images sur une page Web qui sont centrées et alignés dans une rangée sans redimensionner. Les éléments enfants doivent être regroupés et espacés.

Pour y parvenir, vous pouvez exploiter les requêtes multimédias en CSS. Le code fourni montre comment :

<code class="css">body {
    margin: 10px 0;
}
.outer {
    text-align: center;
}
.inner {
    font-size: 0; /* fix for inline gaps */
    display: inline-block;
    text-align: left;
}
.item {
    font-size: 16px; /* reset font size */
    display: inline-block;
    margin: 5px; /* gutter */
}
.item img {
    vertical-align: top;
}
@media (max-width: 551px) { /* ((100+5+5)x5)+1 */
    .inner {
        width: 440px; /* (100+5+5)x4 */
    }
}
@media (max-width: 441px) {
    .inner {
        width: 330px;
    }
}
@media (max-width: 331px) {
    .inner {
        width: 220px;
    }
}
@media (max-width: 221px) {
    .inner {
        width: 110px;
    }
}</code>

Ce code inclut des requêtes multimédias spécifiques pour différentes tailles d'écran afin de garantir que la largeur du div interne est ajustée dynamiquement. Notez que vous devrez peut-être ajuster la taille de la gouttière (marge) en fonction de vos besoins.

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!