如何在纯CSS2中模拟多列布局？

Question

Basically I want to make text "flow" from one column to another in a single container element and make it without CSS3/JS. Here is an example how it should looks like. It shouldn't be exactly a single element, it just need to contain whole text at once.

 .container { -moz-column-width: 20em; -moz-columns: 20em; -webkit-columns: 20em; columns: 20em; } 

 <div class="container">Lorem ...</div> 

or

 .container { column-count: 3; column-width: 30%; column-gap: 40px; } 

 <div class="container">Lorem ...</div> 

Codepen https://codepen.io/Apxa/pen/yzgOpv https://codepen.io/Apxa/pen/yzgJmL

Answer 1

This is simply impossible. CSS 2 has no way to do that.

This is why it is being added in the CSS Multi-column Layout Module any why people used JavaScript to achieve that effect in the past.

The closest you can get is to manually create the columns, but picking a point for the text to move to the next column and putting the two blocks of text in different elements (which can be laid out with floating or any other pre-flexbox technique for putting blocks side by side). Differences between font size, column width, etc makes this impractical.