2016-11-06 2 views
1

Я хотел бы получить аналогичный эффект для моего эскиза.flexbox align items mess

https://postimg.org/image/o03qu4tpp/

Человек должен всегда находиться в правом нижнем углу заголовка. И карусель должен находиться в центре/в центре слева (50% высоты заголовка).

Я добавил новый класс (pad4) в контейнер заголовка и использовал flexbox.

display: flex; 

обоснование-содержание: гибкий конец; выносные элементы: гибкий конец;

А теперь мужчина находится в левом нижнем углу, а текст находится в верхнем правом углу. Я не знаю, как это исправить сейчас. Потому что, когда я использую margin или padding, ничего не происходит.

Сайт: http://jarmor.webd.pl/designs/kovta/agency2a.html

+2

Вопросы, связанные с поиском кода, должны содержать кратчайший код, необходимый для его воспроизведения ** в самом вопросе **, предпочтительно в [** Stack Snippet **] (https: //blog.stackoverflow. ком/2014/09/введение-работоспособной-Javascript-CSS-и-HTML-код-сниппеты /). Хотя вы предоставили ссылку [** на пример или сайт **] (http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work- can-i-just-paste-a-link-to-it), если ссылка должна стать недействительной, ваш вопрос не будет иметь ценности для других будущих пользователей SO с той же проблемой. –

ответ

1

display: flex должен быть применен к родительскому элементу, так что дети считаются нежесткими элементами. Поэтому вы должны применить display: flex; align-items: flex-end; к вашему элементу <header>. Затем примените align-self: center к контейнеру слайдера (div.container-fluid.pad4 в вашем случае). Результат следующий: The result

Смежные вопросы