Wie kann ich mit CSS automatisch ein zweispaltiges Textlayout erstellen?-CSS-Tutorial-php.cn

Wie kann ich mit CSS automatisch ein zweispaltiges Textlayout erstellen?

Patricia Arquette

Freigeben： 2024-11-28 12:03:11

Original

115 Leute haben es durchsucht

How can I Automatically Create Two-Column Text Layout with CSS?

Text mithilfe von CSS automatisch in zwei Spalten überlaufen lassen

Um ein Textlayout zu erstellen, das nahtlos in zwei Spalten übergeht, sollten Sie die Leistungsfähigkeit von CSS nutzen . Im Gegensatz zur herkömmlichen Methode der Verwendung mehrerer Divs bietet CSS eine elegante Lösung, die das gewünschte Ergebnis ohne die Notwendigkeit zusätzlicher HTML-Elemente erzielt.

Die Lösung liegt in der Verwendung der CSS-Eigenschaft „column-count“. Indem Sie diese Eigenschaft auf den Wert 2 setzen, können Sie den Text in zwei gleiche Spalten aufteilen. Um den ästhetischen Reiz zu verbessern, können Sie auch einen Spaltenabstand angeben, um den Abstand zwischen den Spalten zu erhöhen, und eine Spaltenregel, um eine vertikale Linie zu erstellen, die sie trennt.

Hier ist ein Beispiel dafür, wie das CSS aussehen würde:

div.multi {
  column-count: 2;
  column-gap: 10px;
  column-rule: 1px solid black;      
}

Nach dem Login kopieren

Durch Umschließen des Textinhalts in ein

Mit der Klasse Multi überläuft das CSS den Text automatisch in zwei Spalten und erstellt so ein optisch ansprechendes Layout, das dem einer Zeitung ähnelt.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS automatisch ein zweispaltiges Textlayout erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!