Wie kann ich schwebende Divs nur mit CSS auf die gleiche Höhe bringen?

Beheben von Höhenunterschieden bei schwebenden Divs in HTML/CSS

Im Bereich der Webentwicklung tritt bei der Arbeit mit schwebenden Divs eine häufige Herausforderung auf: Stellen Sie sicher, dass sie in der Höhe gleichmäßig ausgerichtet sind. Dieses Rätsel wurde oft mithilfe von HTML-Tabellen gelöst, es bestehen jedoch weiterhin Bedenken hinsichtlich der semantischen Korrektheit.

Die bevorzugte Lösung liegt in der Leistungsfähigkeit von CSS. Durch die Implementierung einer bestimmten Kombination von Stilen können wir schwebende Divs mit gleicher Höhe erreichen:

1. Overflow Hidden: Wickeln Sie die Divs in ein übergeordnetes Div mit Overflow: Hidden ein. Dadurch werden die Divs auf einen bestimmten Bereich beschränkt und verhindert, dass sie über ihre Grenzen hinausragen.
2. Untere Polsterung und negativer Rand: Tragen Sie eine großzügige untere Polsterung, z. B. 500em, auf die Divs auf. Dadurch entsteht ein großer virtueller Raum unter den Divs.
3. Negativer unterer Rand: Fügen Sie einen negativen Rand hinzu, der dem Füllwert entspricht. Dadurch werden die Divs nach oben verschoben und im Wesentlichen die Auffüllung ausgeglichen.

Das folgende CSS-Snippet veranschaulicht diesen Ansatz:

#container {
  overflow: hidden;
  width: 100%;
}
#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
#right-col {
  float: left;
  width: 50%;
  margin-right: -1px;
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

Durch den Einsatz dieser Technik können wir sicherstellen, dass schwebende Divs automatisch angepasst werden Ihre Höhen passen sich dem höchsten Inhalt an und sorgen so für eine angenehme visuelle Konsistenz.

Das obige ist der detaillierte Inhalt vonWie kann ich schwebende Divs nur mit CSS auf die gleiche Höhe bringen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!