Как можно сверстать такую штуку?

Question

[Евгений]

В общем по заданию преподавателя нужно сверстать такой вопросник. Кол-во сообщений в нём должно быть от 1 до 5 ( Т е оно может меняться при этом вёрстка рушиться не должна) и кол-ва текста может меняться. Без Javascript. Без transform.
Можно использовать псевдоклассы и псевдоэлементы. Position.
КОД ПИСАТЬ НЕ НУЖНО Прошу просто помочь подсказать идею. Сверстать такую штуку не проблема, проблема больше с тем чтобы всё выглядело красиво при разном кол-ве сообщений и текста

Comments

[Andrej Sharapov]

можно через список. стилизуем li вертикальной чертой, затем li::after. Содержимое пишем на флексах ( картинка + текст). Без кода, мне кажется, не представить) я мысленно уже сверстал это, пока писал))

[Евгений]

Andrej Sharapov, Флексы запрещены) Гриды тоже. Вашу идею я уже верстал. Проблема с чёрточками начинается

[Евгений]

Andrej Sharapov, Я верстал через разрешённый float

[Rustam Bainazarov]

> серстать такую штуку не проблема

> проблема больше с тем чтобы всё выглядело красиво при разном кол-ве сообщений и текста

( ͡° ͜ʖ ͡°)

Answer 1

[Denis Minimal]

Предложу такую структуру

<обертка>
    <вопрос>
        <аватар></аватар>
        <обертка текстового блока></обертка текстового блока>
    </вопрос>
    <ответ>
        <аватар></аватар>
        <обертка текстового блока></обертка текстового блока>
    </ответ>
    <ответ>
        <аватар></аватар>
        <обертка текстового блока></обертка текстового блока>
    </ответ>
    <ответ>
        <аватар></аватар>
        <обертка текстового блока></обертка текстового блока>
    </ответ>
</обертка>

Стрелки и линии делаются с помощью псевдоэлементов :before и :after

.ответ .аватар:before {

}
.ответ .аватар:after {

}

Надеюсь это тебе поможет. Успехов

Comments

[Евгений]

У меня возникает проблема с высотой стрелок. Она должна быть динамической. потому что сообщения могут быть разной высоты.

А стрелки эти при помощи before after делают на абсолютном позиционировании / В этом то и сложность)

[RAX7]

Евгений,

[Евгений]

RAX7, С этими вертикальными палками как раз и вопрос.
Как я понял высота палки будет наследоваться от высоты всего контента li

В общем сейчас сделаю, но кажется всё-равно вылезут проблемы с высотой палок вертикальных

[Анатолий Куликов]

Если правильно написано, то не вылезут. Родительском элементу для before ставите position: relative, а самому before - absolute. И все будет ок. Такую же штуку делал, по такой же схеме.

[Евгений]

Анатолий Куликов, Что-то такое получилось https://codepen.io/dunakov/pen/qwbyjw

[Анатолий Куликов]

Евгений, вот, оно работает.

[Denis Minimal]

Евгений, Обертке прописать overflow: hidden, а вертикальной линии height: 5000px; так она не будет выходить за пределы блока. я бы так сделал