Wie erreicht man eine horizontale Div-Ausrichtung in CSS?

Horizontale Div-Ausrichtung in CSS

Bei der Arbeit mit CSS kann die horizontale Ausrichtung von Divs innerhalb eines Containers eine Herausforderung darstellen. Standardmäßig werden schwebende Divs vertikal gestapelt, wenn ihre Gesamtbreite die Breite des übergeordneten Containers überschreitet, auch wenn die Höhe des Containers eine horizontale Anordnung zulässt.

Um die gewünschte horizontale Ausrichtung zu erreichen, können wir ein inneres Div innerhalb des Containers verwenden ist ausreichend breit, um alle schwebenden Divs aufzunehmen.

#container {
  background-color: red;
  overflow: hidden;
  width: 200px;
}

#inner {
  overflow: hidden;
  width: 2000px;
}

.child {
  float: left;
  background-color: blue;
  width: 50px;
  height: 50px;
}

<div>

In dieser Lösung hat das #innere Div eine Breite, die größer ist als die kombinierte Breite von die schwebenden #child-Divs. Daher werden alle schwebenden Divs innerhalb des #container-Div horizontal ausgerichtet, was zum gewünschten Layout führt.

Das obige ist der detaillierte Inhalt vonWie erreicht man eine horizontale Div-Ausrichtung in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!