Comment centrer un conteneur avec des éléments enfants alignés à gauche et des images réactives ?

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

Cette question vise à afficher les images dans un conteneur centré sur la page, avec le images regroupées et affichées les unes après les autres. Le défi réside dans le maintien d'une distance fixe entre les images tout en s'adaptant aux différentes largeurs de fenêtre du navigateur.

Pour obtenir cette disposition à l'aide de CSS, des requêtes multimédias peuvent être utilisées pour ajuster la largeur du div contenant l'image en fonction de la taille de la fenêtre d'affichage. . Le code ci-dessous illustre cette approche :

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

Au sein de la structure HTML :

<div class="outer">
  <div class="inner">
    <div class="item"><img src="..."></div>
    <div class="item"><img src="..."></div>
    <div class="item"><img src="..."></div>
  </div>
</div>

Cette approche utilise des requêtes multimédias pour ajuster dynamiquement la largeur du div interne lorsque la fenêtre du navigateur est redimensionnée. La largeur est calculée en tenant compte de la taille de chaque image et de la gouttière souhaitée entre elles. Le nombre d'images par ligne change automatiquement en fonction de la largeur du navigateur.

Il est important de noter qu'il est recommandé d'optimiser le code pour les performances si vous traitez un grand nombre d'images. De plus, envisagez d'utiliser des préprocesseurs Flexbox ou CSS pour une solution plus flexible.

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!