Heim > Web-Frontend > CSS-Tutorial > Warum passen zwei Inline-Block-Elemente mit einer Breite von 50 % nicht nebeneinander?

Warum passen zwei Inline-Block-Elemente mit einer Breite von 50 % nicht nebeneinander?

Susan Sarandon
Freigeben: 2024-12-07 09:47:12
Original
312 Leute haben es durchsucht

Why Do Two 50% Width Inline-Block Elements Not Fit Side-by-Side?

Zwei Inline-Block-Elemente mit 50 % Breite passen nicht nebeneinander in eine Reihe: Warum?

Bei Verwendung von Inline-Block Elemente gibt es ein inhärentes Problem mit Leerzeichen zwischen ihnen (ungefähr 4 Pixel breit). Das bedeutet, dass zwei Divs mit jeweils 50 % Breite plus diesem Leerzeichen die 100 %-Breite überschreiten, was dazu führt, dass sie aus ihrer vorgesehenen einzelnen Zeile ausbrechen.

Beispiel:

body {
  margin: 0;
}

div {
  display: inline-block;
  width: 50%;
}

.left {
  background-color: aqua;
}

.right {
  background-color: gold;
}
Nach dem Login kopieren
<div class="left">foo</div>
<div class="right">bar</div>
Nach dem Login kopieren

Gründe für das Leerzeichen Problem:

  • Randkollaps: Ränder von Inline-Elementen werden nicht zusammengeführt oder reduziert; Stattdessen erzeugen sie kleine Abstände zwischen den Elementen.
  • Abstand zwischen Inline-Elementen: Browser fügen normalerweise einen Abstand von 4 Pixeln zwischen Inline-Elementen hinzu, wenn kein Abstand oder Rahmen definiert ist.

Alternative Lösungen:

Beim Einstellen eines Divs auf 49 % Breite kann Um das Lückenproblem zu lösen, ist dies keine ideale Vorgehensweise. Zu den Alternativen gehören:

  • Float: Floating-Elemente beseitigen das Problem der Inline-Lücke, wirken sich jedoch auf die vertikale Ausrichtung aus.
  • Flexbox: Die Verwendung von Flexbox ermöglicht für eine präzisere Layoutkontrolle und vermeidet Probleme mit Leerzeichen.
  • CSS Raster: Das moderne CSS-Raster-Layout bietet einen rasterbasierten Ansatz zur Steuerung der Elementpositionierung, wodurch Inline-Block-Elemente und deren Abstandsprobleme überflüssig werden.

Das obige ist der detaillierte Inhalt vonWarum passen zwei Inline-Block-Elemente mit einer Breite von 50 % nicht nebeneinander?. 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