Wie erstelle ich schwebende Divs gleicher Höhe mit reinem CSS?

Floating-Divs gleicher Höhe in HTML/CSS erstellen

Bei der Arbeit mit Floating-Divs kann es manchmal schwierig sein, gleiche Höhen zwischen den Divs beizubehalten divs. Auch wenn eine Tabelle eine einfache Lösung sein kann, ist sie semantisch möglicherweise nicht immer angemessen. Glücklicherweise gibt es reine CSS-Techniken, um dies zu erreichen.

Ein Ansatz besteht darin, einen unteren Abstand und einen negativen unteren Rand auf die Divs anzuwenden. Die Polsterung erzeugt den Eindruck eines vertikalen Raums, während der Rand dieser Polsterung entgegenwirkt. Dies kann genutzt werden, um Spalten gleicher Höhe zu erstellen.

Darüber hinaus kann das Einschließen der Divs in einen übergeordneten Container mit „overflow:hidden“ verhindern, dass Inhalte außerhalb des Containers überlaufen. Dadurch bleibt die vertikale Ausrichtung erhalten.

Um Text innerhalb der Divs vertikal zu zentrieren, sollten Sie die Verwendung von Zeilenhöhen- oder Flexbox-Techniken in Betracht ziehen. Wenn Sie beispielsweise die Zeilenhöhe auf einen großen Wert festlegen oder Flexbox verwenden und Elemente in der Mitte ausrichten, können Sie eine vertikale Ausrichtung erreichen.

Das folgende Codebeispiel demonstriert diese Technik:

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

Dies Der Ansatz bietet eine saubere und semantisch angemessene Möglichkeit, schwebende Divs gleicher Höhe in HTML/CSS zu erstellen.

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