Помогите разобраться с версткой тут

Наверное, видели, как иногда на этом форуме подпись вдруг съезжает влево, под аватар. Опытным путем установлено, что это происходит в постах с цитатами, верстку как будто распирает и блок с подписью не помещается.

Но вот я смотрю на стили и не понимаю, что там починить, чтобы оно так прекратило делать?

Вот сейчас подпись будет нормальной.

Ха-ха, блин. Нет, причина не в подписи, видимо.

Тестировать так тестировать.

Судя по стилям, это его нормальное поведение, прилипать влево. Просто, если блок с сообщением небольшой, то ему блок с аватаром мешает, а потом он нормально смещается.
Точнее, баг дизайна, конечно.

@Gray в этом посте нет цитаты, а подпись под аватаром. Так что версия провальная.

Ну вот это мы уже установили. Просто сам блок с аватаром небольшой и если он меньше блока с текстом поста, подпись съезжает. Как блоку с аватаром выставить высоту, на 10px больше, чем высота соседнего блока, и не погрязнуть в jQuery каком-нибудь — интересная задача.

Пользователь @Gray написал в Помогите разобраться с версткой тут:

Ну вот это мы уже установили. Просто сам блок с аватаром небольшой и если он меньше блока с текстом поста, подпись съезжает. Как блоку с аватаром выставить высоту, на 10px больше, чем высота соседнего блока, и не погрязнуть в jQuery каком-нибудь — интересная задача.

Попробуем воиспроизвести

Вот-вот, видишь?

Видеть то вижу, но мне не понятно пока, нужно ждать кто у нас тут верстальщик есть.

Там флоатами сверстано… Надо эти три дива (После дива с классом post-author) в общий див запихивать 🙂

И это не из-за цитаты, а из-за высоты текста…
1
1
1
1
1
1
1
вот так тоже съехать должно

Там где-то дивы с col-sm-10. Их надо в див запихать, а потом настраивать css… Так сложно по коду понять что и куда запихивать 🙂

Можно заплаткой через js еще растянуть .topic .post .post-author на всю высоту дива с классами row post, но там медиа css перекосит…

В принципе там просто все поменять, попросите знакомых верстальщиков 🙂 Там на 5 минут работы, мне кажется, если знать где менять 🙂

Надо посмотреть свойство float у глобального стиля DIV.
И при необходимости переопределить его в стилях этих блоков.
Саму подпись выводить в одном контейнере с текстовыми блоками,
а блок аватарки вынести из этого контейнера, и выводить его первым.

@speech Я вроде это и написал 🙂

Ну, вроде победили 😊.

Правда, из-за этого несколько выросла высота каждого поста.

Пользователь @ziliboba0213 написал в Помогите разобраться с версткой тут:

Я вроде это и написал

я просто развернул: два разных описания лучше одного 🙂

Пользователь @Gray написал в Помогите разобраться с версткой тут:

Правда, из-за этого несколько выросла высота каждого поста.

а это не страшно 🙂

Стало как-то аккуратнее.

Пользователь @Gray написал в Помогите разобраться с версткой тут:

Ну, вроде победили 😊.

Правда, из-за этого несколько выросла высота каждого поста.

Так маргин лефт в мобильной версии уберите тогда 🙂 А то там подпись вправо уехала 🙂 используйте css media 🙂