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

Zwei Floating-Divs in HTML/CSS auf die gleiche Höhe bringen

Einführung

Gleichheit erreichen Höhe in Divs kann eine Herausforderung sein, insbesondere wenn sie nebeneinander liegen und unterschiedliche Inhaltslängen haben. Eine häufige Problemumgehung ist die Verwendung von Tabellen, aber dieser Ansatz ist möglicherweise semantisch nicht angemessen.

Mit CSS Divs mit gleicher Höhe erstellen

Um gleiche Höhen ohne die Verwendung von Tabellen zu erreichen, verwenden Sie CSS bietet mehrere Techniken. Ein Ansatz besteht darin, einen großen unteren Abstand festzulegen, diesen Abstand mit einem negativen unteren Rand zu negieren und die Divs mit einem Container mit verstecktem Überlauf zu umgeben.

Implementierung

Zur Demonstration dieser Technik Beachten Sie den folgenden CSS-Code:

#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; /* for IE compatibility */
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

Erstellen Sie im HTML den div-Container und zwei untergeordnete Elemente divs:

<div>

Dieser Ansatz zwingt die beiden Divs im Wesentlichen dazu, die gleiche Höhe zu haben, auch wenn sie unterschiedliche Mengen an Inhalten enthalten. Der große untere Abstand und der negative Rand heben sich gegenseitig auf, sodass die Divs nur den vertikalen Platz einnehmen, den sie benötigen. Der Container mit verstecktem Überlauf stellt sicher, dass überschüssiger Inhalt nicht sichtbar ist.

Fazit

Diese CSS-Technik bietet eine semantisch korrekte Möglichkeit, schwebende Divs gleicher Höhe in HTML/ zu erstellen. CSS. Es ahmt effektiv das Verhalten einer Tabelle nach, ohne unnötiges Markup einzuführen.

Das obige ist der detaillierte Inhalt vonWie kann ich zwei 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!