Heim > Web-Frontend > CSS-Tutorial > Wie zentriere ich einen Container mit linksbündigen untergeordneten Elementen und responsiven Bildern?

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

Patricia Arquette
Freigeben: 2024-11-02 08:42:29
Original
872 Leute haben es durchsucht

How to Center a Container with Left-Aligned Child Elements and Responsive Images?

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; }
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage