Search the Community

Здравствуйте! Потребовалось сверстать блок вот такого типа. 1 - плавающий блок с заголовком, неопределенной ширины, растягивается вправо и прижат к аватарке 3. Ширина не ограничена и зависит от того, что в нем написано. 2 - блок с кнопками управления своей учеткой, находится справа от блока 1, прижат к правому краю, НО если из-за длины блока 1 блок 2 не вмещается, он должен переместиться в место под аватаркой, отмеченное красным кругом. 3 - аватарка, у меня она с абсолютным позиционированием, положение блоков относительно ее регулируется пэддингом. Один из ключевых моментов - это резиновый макет, т.е. при увеличивании \ уменьшении окна браузера все должно работать корректно. Собственно, я не смог найти ничего более умного, кроме как определить через php длину заголовка 1 и проставить для блока 2 классы типа pull-left-768, pull-left-1199 и так далее, которые сдвигают при определенных ключевых точках этот блок в место, отмеченное кружочком. Поскольку макет сделан на бутстрапе, то это не сложно. Но решение получилось довольно костыльным и не без недостатков... поэтому у меня вопрос: как бы вы сделали подобный блок? На основании каких хаков \ приемов и т.п. И возможно ли вообще реализовать такое непростое поведение на чистом css? p.s. js я не применял, т.к. возможны артефакты при загрузке страницы. Буду благодарен за советы