Horizontal columns with multicolumn headers

Question

There are horizontally scrolling columns. They contain some text with headings. It is necessary to make each heading positioned at the beginning of a new column and spread across all the columns related to it:

or so:

But it turns out only this (and even that does not work at least in Firefox):

I tried to do it with inline-blocks , but there was another problem there. I also tried to use negative margins, absolute positioning and transform , but it didn't work out - they remain inside the region and do not allow to climb up (except for the option with absolute relative to the container: the horizontal position in the column is reset).

The simplest version of the code https://jsfiddle.net/07n6L2yh/10/

 .container { outline: 1px dotted gray; height: 200px; -moz-column-width: 10em; column-width: 10em; -moz-column-fill: auto; column-fill: auto; overflow-x: auto; } h2 { break-before: column; /* Firefox? */ border-bottom: 1px solid; margin: 0 0 .25em; } p { margin: 0; }

 <div class="container"> <h2>Lorem ipsum</h2> <p>Lorem ipsum dolor sit amet, eu eirmod complectitur pri, agam libris euripidis no quo. In cum adolescens necessitatibus, et hinc nominati indoctum his, idque prompta moderatius cu per. Quo ei novum utroque, ius ex graecis volutpat quaerendum! Ea assum erroribus accommodare pri, simul omnesque scaevola has cu, an putant tacimates ius. Ius soluta nonumes ei? Ex modus eligendi repudiandae ius, nec cu quem delicatissimi.</p> <h2>AAA</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, explicabo.</p> <h2>Dolor sit</h2> <p>Lorem ipsum dolor sit amet, eu eirmod complectitur pri, agam libris euripidis no quo. In cum adolescens necessitatibus, et hinc nominati indoctum his, idque prompta moderatius cu per. Quo ei novum utroque, ius ex graecis volutpat quaerendum!</p> <h2>BBB</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p> <h2>CCC</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p> </div>

Updated version: https://jsfiddle.net/07n6L2yh/11/

PS: This question is in English.

@ Jean-Claude, how to make it happen like in any of the first two screenshots.
Somehow provide indents at the top of the columns and put a title on top of them?
I managed to do @Qwertiy, but my method does not work if I do not set the width of the place, such as the width of the main block width: 1000px jsfiddle.net/mv1r9twg something like that.
But you should always know how much should occupy the area with this text)

lamartire lamartire 178 ten · Answer 1 · 2016-08-17T14:30:50

Maybe this is a bit not what is required, but the attempt is not torture.

Example (jade / stylus)

The bottom line is that each section with columns is a separate block (as I understood from the examples, it is not necessary that there were only p and h2 in the markup), respectively, each section is an independent stream.

Layout (cut fish):

 <div class="text-column"> <div class="text-column__title"> <h2>Lorem ipsum dolor sit amet</h2> </div> <div class="text-column__content"> <p>"Lorem ipsum dolor sit amet, consectetur...</p> </div> </div>

Styles:

 .text-column { display inline-block vertical-align top width 33% } .text-column__title h2 { margin 0 0 15px border-bottom 1px dotted } .text-column__content { height 250px -moz-column-width 10em column-width 10em -moz-column-fill auto column-fill auto } p { margin 0 }

The heading container (or heading, in fact, this is completely irrelevant, since both of them are block elements) occupies 100% of the section width, while the content is also a block element, inside of which a paragraph is broken into columns.

In this case, the script needs to dynamically split the text into columns, as well as repartition again when resizing.

Horizontal columns with multicolumn headers

1 answer 1

More articles: