У меня горизонтальные прокручивающиеся столбцы. Внутри них есть текст с заголовками. Мне нужно, чтобы каждый заголовок Forsing нового столбца и occupiing всего пространства над колоннами beloning к нему:Горизонтальные столбцы с многоколоновыми заголовками
Но самое лучшее, что я могу сделать, это (кстати, он не в Firefox):
Я tried to archive desired result using inline-block
s, но другая проблема возникла там. Я также пробовал несколько способов с отрицательными полями, абсолютным позиционированием и transform
, но без успеха: они не позволяют получить выше столбцов (кроме absolute
с контекстом участника: он забывает о горизонтальном позиционировании на основе столбцов).
Простейшая код 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>
Более сложный вариант: https://jsfiddle.net/07n6L2yh/11/
Я бы сказал, что каждый из тех, кто возглавляет и устанавливает пункт нуждается в их собственной оболочке. –
@Paulie_D, да, я пробовал с обертками. Обертки для группы или обертки для заголовков или обертки для обеих групп и заголовков. Перемещение заголовков в контексте их оберток или в контексте контейнера. Но ничего не помогло. Поэтому я решил опубликовать простой код, чтобы не путать читателей с кучей оберток. – Qwertiy
@Paulie_D, https://jsfiddle.net/07n6L2yh/7/ например. – Qwertiy