23 Янв 2017

Как разместить блоки div друг за другом?

Задача: Как разместить блоки div друг за другом?

Имеем следующую ситуацию. Шапка сайта, название сайта и его описание, лого сайта.

header-default

По умолчанию название сайта, его описание и лого расположены по центру, один под другим. Необходимо разместить название/описание и лого друг за другом по горизонтали.

Решение: В разметке шапки мы имеет такой html-код, где site-branding - название и описание сайта, а site- logo , соответственно, лого сайта :

< div class="inside-header grid-container grid-parent" >
     < div class="site-branding" >
     < div class="site-logo" >
< /div>

Как уже писалось выше, расположение этих двух div по умолчанию установлено по центру. Оставляем блок site-branding по центру, блок с лого выравниеваем в style.css вправо:

.site-logo {
float:right;
}

Получаем такой результат:

Теперь присваиваем блоку site-branding стиль, как он должен отображаться:

.site-branding{
display:inline-block;
}

Мы получили необходимый нам результат:

Понравилась статья? Поделись с друзьями!
Эта запись была размещена в Дизайн с тэгом . Добавьте ссылку в закладки.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Решите задачку * Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.