Как сверстать блок с секциями?

Question

[Kovalsky]

Заранее извиняюсь за не очень понятный заголовок вопроса. Дело в том, что я толком не знаю как можно обозвать этот блок, поэтому и гуглил что-то невнятное типа "css scheme", "css block with sections" и так далее.

Блок выглядит так:


Черными полосами обозначен текст. Заголовки должны охватывать текст, соответственно и скобки должны как-то адаптироваться под количество текста.

Была идея сделать с помощью одной большой таблицы, где скобки секций рисовались бы с помощью границ ячеек, но внезапно выяснилось, что ячейки имеющие только вертикальные границы схлопываются 0_0 Небольшой апдейт: не схлопываются, а просто для таких ячеек как-то по-другому считается высота.

Какие есть варианты?

Comments

[Ankhena]

before и after

[Kovalsky]

Ankhena, к сожалению, на этот раз я в роли дурачка, который не понимает как это применить к задаче)

Эти заголовки должны охватывать текст, соответственно и скобки должны как-то адаптироваться под количество текста.

[Ankhena]

Никита Полевой, а я на ник не посмотрела
сейчас найду, где-то валялся пример

[Антон]

ячейки имеющие только вертикальные границы схлопываются 0_0

Это как? Есть макет или более детальное описание?

[Ankhena]

Никита Полевой, не та, которую искала www.zlatov.net/publication/drevovidnyy-spisok.html

А у вас на картинке первый блок вроде сам по себе, а второй и третий вместе. Я не до конца представила себе как оно должно работать.
Может и ссылка не подойдет.

[Kovalsky]

Антон, да, конечно, вот макет. Можно видеть, что в промежуточных "секциях" высота для центральных ячеек распределяется неравномерно.

[Ankhena]

Никита Полевой, https://jsfiddle.net/k99fkd8m/
проблема только выяснять где одиночный блок и задавать высоту 80%
т.е. на js не проблема, не придумала как на css

[Kovalsky]

Ankhena, красиво конечно, но, черт, всё во флексах( Табличной логикой бы воспользоваться 0_0 Или просто механизмами попроще, чем флекс.

Это по мотивам предыдущего вопроса)

[Ankhena]

Никита Полевой,
https://jsfiddle.net/rvkq8q28/

Горизонтальные границы заменила на фон градиентом в 1 точку (можно на псевдоэлементы поменять)
Опять же стоит вопрос как считать номера строк, чтобы ставить правильные отступы и границы. Но с другой стороны оно же как-то генерируется то схлопнутые, то отдельные блоки?

Ну и пооптимизировать свойства, наверное, еще можно.

[Kovalsky]

Ankhena, спасибо за материал, буду думать)

Answer 1

[Kovalsky]

Прошло сто лет, и я наконец решил эту фигню с помощью диких неадекватных таблиц, вот