Wie zentriere ich einen Container mit linksbündigen untergeordneten Elementen und responsiven Bildern?

Container zentriert ausrichten und untergeordnete Elemente links ausrichten

Diese Frage zielt darauf ab, Bilder in einem Container anzuzeigen, der auf der Seite zentriert ist, mit dem Bilder gruppiert und nacheinander angezeigt. Die Herausforderung besteht darin, einen festen Abstand zwischen Bildern beizubehalten und gleichzeitig unterschiedliche Browserfensterbreiten zu berücksichtigen.

Um dieses Layout mithilfe von CSS zu erreichen, können Medienabfragen verwendet werden, um die Breite des bildhaltigen Div basierend auf der Größe des Ansichtsfensters anzupassen . Der folgende Code veranschaulicht diesen Ansatz:

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

Innerhalb der HTML-Struktur:

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

Dieser Ansatz verwendet Medienabfragen, um die Breite des inneren Divs dynamisch anzupassen, wenn die Größe des Browserfensters geändert wird. Die Breite wird unter Berücksichtigung der Größe jedes Bildes und des gewünschten Zwischenraums zwischen ihnen berechnet. Die Anzahl der Bilder pro Zeile ändert sich automatisch basierend auf der Browserbreite.

Es ist wichtig zu beachten, dass die Optimierung des Codes für die Leistung empfohlen wird, wenn es mit einer großen Anzahl von Bildern zu tun hat. Erwägen Sie außerdem die Verwendung von Flexbox- oder CSS-Präprozessoren für eine flexiblere Lösung.

Das obige ist der detaillierte Inhalt vonWie zentriere ich einen Container mit linksbündigen untergeordneten Elementen und responsiven Bildern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!