Wie kann ich schwebende Divs innerhalb eines Containers mit fester Größe horizontal ausrichten?

Floatierte Divs horizontal ausrichten

Wenn Sie mit einem Container-Div mit fester Größe und ausgeblendetem Überlauf arbeiten, kann das horizontale Ausrichten von schwebenden Divs eine Herausforderung sein. Standardmäßig werden schwebende Divs in die nächste Zeile umgebrochen, wenn sie die rechte Grenze ihres übergeordneten Elements erreichen, auch wenn darüber Platz verfügbar ist.

Gewünschte Darstellung

Die gewünschte Darstellung ist eine horizontale Reihe von Divs innerhalb des Containers, wodurch verhindert wird, dass sie sich auf mehrere Zeilen verteilen. Inline-Elemente mit Leerzeichen: No-Wrap kann dies erreichen, ist aber nicht für schwebende Elemente auf Blockebene geeignet.

Lösung

Um dieses Problem zu beheben, können Sie ein inneres Div innerhalb des einfügen Container, der ausreichend breit ist, um alle schwebenden Divs aufzunehmen. Indem Sie die Überlaufeigenschaft sowohl für den Container als auch für das innere Div auf „Ausgeblendet“ setzen, können Sie verhindern, dass die Divs aus dem angegebenen Bereich herauslaufen.

Beispielcode

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

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

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

Das obige ist der detaillierte Inhalt vonWie kann ich schwebende Divs innerhalb eines Containers mit fester Größe horizontal ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!