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

Floating-Divs gleicher Höhe mit CSS

Sie möchten zwei Floating-Divs erreichen, die die gleiche Höhe haben und durch eine Linie getrennt sind. Tabellen bieten eine praktische Lösung, aber aus semantischen Gründen suchen Sie nach einer CSS-Alternative.

Der Schlüssel zu Spalten mit gleicher Höhe liegt in der Verwendung einer umfangreichen unteren Auffüllung und eines negativen unteren Rands. Darüber hinaus müssen die Spalten in einem Div eingeschlossen sein, wobei der Überlauf ausgeblendet sein muss.

Beachten Sie für die vertikale Textausrichtung das folgende CSS-Snippet:

#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;
}

Mit diesem CSS können Sie die Höhen mühelos ausrichten von schwebenden Divs und erstellen Sie ein optisch ansprechendes Layout.

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