Wie kann ich mit CSS automatisch ein zweispaltiges Textlayout erstellen?

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

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!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn