Wie erstelle ich in CSS zwei schwebende Divs gleicher Höhe mit einer Trennlinie?

Floating-Divs gleicher Höhe mit CSS erstellen

Problem:Erstellen von zwei Floating-Divs, die die gleiche Höhe haben und haben eine Trennlinie zwischen ihnen, ohne Tabellen für die Semantik zu verwenden Gründe.

Lösung:Um dies zu erreichen, können Sie die folgende CSS-Technik anwenden:

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

Erklärung:

• Das Einschließen der Divs in einen Container mit „overflow: versteckt“ erzwingt, dass der durch die schwebenden Divs verursachte Zeilenumbruch innerhalb von liegt Container.
• Durch Anwenden eines großen unteren Abstands und eines negativen Rands in gleicher Höhe auf die Divs wird sichergestellt, dass sie sich ausdehnen, um 100 % der Höhe einzunehmen, während ihr Inhalt weiterhin vertikal zentriert bleibt.
• Die Trennlinie Die Divs werden mit einem kleinen Rand oder Rand erstellt, der auf eines davon angewendet wird.

Mit dieser CSS-Technik können Sie zwei gleich hohe Elemente erstellen Floating-Divs ohne die semantischen Implikationen der Verwendung einer Tabelle.

Das obige ist der detaillierte Inhalt vonWie erstelle ich in CSS zwei schwebende Divs gleicher Höhe mit einer Trennlinie?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!