Wie ordne ich in HTML/CSS vertikale Spalten in horizontale um?

3-Spalten-Layout in HTML/CSS

Problem:

Sie haben ein HTML Layout mit drei vertikal angeordneten Spalten: links, Mitte, rechts. Sie möchten diese Spalten mithilfe von CSS horizontal neu anordnen, ohne die HTML-Struktur zu ändern.

Lösung:

Um eine horizontale Spaltenanordnung zu erreichen, können Sie die folgenden CSS-Eigenschaften verwenden:

.column-left { float: left; width: 33.333%; }
.column-right { float: right; width: 33.333%; }
.column-center { display: inline-block; width: 33.333%; }

Erklärung:

• Float: links; richtet die linke Spalte am linken Rand ihres Containers aus.
• float: right; Richtet die rechte Spalte am rechten Rand ihres Containers aus.
• display: inline-block; Platziert die mittlere Spalte in einer Linie mit den anderen Spalten und eliminiert so den Leerraum, der vorhanden wäre, wenn es sich um ein Element auf Blockebene handeln würde.
• Die Eigenschaft width legt die Breite jeder Spalte auf ein Drittel der Breite des Containers fest .

Zusätzliche Tipps:

• Für mehr Flexibilität können Sie ein Rastersystem mit erstellen mehrere Spalten, indem Sie die Spalten-*-Klassen zuweisen (z. B. Spalte-zwei, Spalte-drei).
• Verwenden Sie die Spalten-Offset-*-Klassen, um Offsets auf Spalten anzuwenden, sodass Sie den Abstand zwischen ihnen steuern können.
• Verwenden Sie die Column-inset-*-Klassen, um Spalten innerhalb des Containers einzufügen und so das Layout weiter anzupassen.

Das obige ist der detaillierte Inhalt vonWie ordne ich in HTML/CSS vertikale Spalten in horizontale um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!