How to Create a Multi-Column Text Layout with CSS and JavaScript?

Multi-Column Text Layout with CSS and JavaScript

Creating a newspaper-like layout with text flowing into multiple columns can be achieved using CSS or JavaScript.

CSS-Only Solution

To effortlessly create multi-column text using just CSS, utilize the following code:

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

JavaScript Solution

If JavaScript is preferred, consider a solution that estimates the number of paragraphs (

elements) within the content div and then moves half of them to float right. However, this method is more complex and may require additional JavaScript expertise.

The above is the detailed content of How to Create a Multi-Column Text Layout with CSS and JavaScript?. For more information, please follow other related articles on the PHP Chinese website!