So erstellen Sie Textspalten in CSS: Nur CSS oder JavaScript?

Erstellen von Textspalten mit CSS-Überlauf

Bei der Webentwicklung kann es vorkommen, dass Sie Textspalten erstellen möchten, die an Folgendes erinnern das Layout, das in Zeitungen zu finden ist. Um diesen Effekt zu erzielen, ohne zusätzliche HTML-Divs zu verwenden, können Sie CSS nutzen und auch die Einbindung von JavaScript in Betracht ziehen.

Nur-CSS-Lösung

Glücklicherweise gibt es eine reine CSS-Lösung Lösung, die Ihren Text in übersichtliche Spalten umwandeln kann. Mithilfe der folgenden CSS-Regeln können Sie die Anzahl der Spalten und den Abstand zwischen ihnen festlegen und die Ränder definieren:

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

JavaScript-Lösung

Alternativ: Sie können JavaScript verwenden, um die Spalten dynamisch zu erstellen. Hier ist ein möglicher Ansatz:

// Get the content div
const content = document.querySelector(".content");

// Count the number of paragraphs
const paragraphs = content.querySelectorAll("p");

// Split the paragraphs into two equal arrays
const firstHalf = paragraphs.slice(0, Math.floor(paragraphs.length / 2));
const secondHalf = paragraphs.slice(Math.floor(paragraphs.length / 2));

// Float the second half of the paragraphs right
secondHalf.forEach((paragraph) => {
  paragraph.style.float = "right";
});

In diesem Szenario zählt JavaScript die Absätze innerhalb des Inhalts-Div, teilt sie in zwei Arrays auf und verschiebt die zweite Hälfte der Absätze, um das zweispaltige Layout zu erstellen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie Textspalten in CSS: Nur CSS oder JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!