Heim > Web-Frontend > CSS-Tutorial > Wie kann ich schwebende Divs nur mit CSS auf die gleiche Höhe bringen?

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

DDD
Freigeben: 2024-12-11 15:59:14
Original
605 Leute haben es durchsucht

How Can I Make Floating Divs Equal Height Using Only CSS?

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

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!

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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage