🏠 | 💻  IT | CSS |

Обтекание одного блока другим CSS

Задача

Нужно чтобы один блок был слева от другого, а когда высота этого блока закончится - нужно чтобы текст второго блока был под первым.

Содержание статьи
Задача
Решение с помощью float
Остановить обтекание
Решение с помощью Grid

Решение с помощью float

HTML

<div class="left_div1"> </div> <div class="rigth_div1"> </div>

CSS

Самое важное - это указать у левого блока свойство float:left

Для наглядности я задам свойство background:lightblue; чтобы фон стал светло-синим

А правому блоку зададим светло-зелёный цвет.

.left_div1 { float:left; width:40%; background:lightblue; } .right_div1 {background:lightgreen;}

Результат


"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment,

"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."

Результата мы добились но блоки пока слишком близко друг к другу

Добавим внутренних и внешних отступов.

HTML

<div class="left_div2">
</div>
<div class="rigth_div2">
</div>

CSS

.left_div2
{
float:left;
width:40%;
background:lightblue;
margin-right:15px;
padding:10px;
}

.right_div2
{
padding:10px;
background:lightgreen;
}


"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment,

"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."

Практический пример

Предположим я хочу прорекламировать новую карту Альфа-Банка - Альфа Travel.

Для этого я планирую разместить изображение с картой в левый блок а текст с описанием - в правый.


Напокупал? Напутешествуй!

Оплачивай билеты картой Alfa Travel и получай мили на следующие путешествия.

Лучшая карта для любителей путешествий

Alfa Travel Premium
Alfa Travel

11%
0%
Вернём за покупки
до 11% милямиБесплатное снятие наличных по всему миру
7%

0₽
до 7% на остаток по счетуБесплатное
годовое обслуживание

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

В практическом примере нам уже не нужно выделять фон, поэтому уберём это из стилей.

HTML

<div class="left_div3"> </div> <div class="rigth_div3"> </div>

CSS

.left_div3 { float:left; width:40%; margin-right:15px; padding:10px;} .right_div3 {padding:10px;}

Результат


Напокупал? Напутешествуй!

Оплачивай билеты картой Alfa Travel и получай мили на следующие путешествия.

Лучшая карта для любителей путешествий

Alfa Travel Premium
Alfa Travel

11%
0%
Вернём за покупки
до 11% милямиБесплатное снятие наличных по всему миру
7%

0₽
до 7% на остаток по счетуБесплатное
годовое обслуживание

Остановить обтекание

Достаточно там, где Вы хотите остановить обтекание разместить элемент, например div или br и присвоить ему класс, который содержит в себе clear:both

Например:

HTML

<div class="clearBoth"></div>

CSS

.clearBoth { clear: both; }

CSS Grid

Более продвинутый вариант - это использование CSS Grid - решетки на которой можно разместить любое количество блоков.

Тем не менее - это не полный аналог а скорее другой способ решить похожие задачи, который применим не везде.

.gridBox > div { padding: .1rem; } .gridBox { display: grid; grid-template-columns: repeat(1fr, 2fr); grid-gap: 3px; grid-auto-rows: minmax(100px, auto) } .gridBox--one, .gridBox--three { max-width:260px;} .gridBox--one { grid-column: 1; grid-row: 1; } .gridBox--two { min-width:320px; max-width:800px; grid-column: 2; grid-row: 1/3; } .gridBox--three { grid-column: 1; grid-row: 2; } @media screen and (max-width: 735px) { .gridBox{width:100%} .gridBox > div { border: 0; border-color: #502542;; border-color: rgba(80, 37, 70, 0.3); border-radius: 0; padding: 0;} .gridBox--one, .gridBox--three { min-width:180px; max-width:100%;} .gridBox--one { grid-column: 1 ; grid-row: 1; } .gridBox--two { min-width:180px; width:100%; grid-column: 1; grid-row: 2; } .gridBox--three { grid-column: 1; grid-row: 3; } } @media screen and (min-width: 1840px) { .tOfContents caption {font-size:1.5rem;padding:1rem 0;text-align:left;} .tOfContents td {font-size:1.4rem;} .tOfContents td a {padding:1.2rem;} } @media screen and (max-width: 1840px) and (min-width: 1200px) { .tOfContents caption {font-size:1.5rem;padding:1rem 0;text-align:left;} .tOfContents td {font-size:1.4rem;} .tOfContents td a {padding:1.2rem;} } @media screen and (max-width: 1199px) and (min-width: 1000px) { .tOfContents td a {padding:1.2rem;} .tOfContents caption {font-size:1.5rem;padding:1rem 0;} } @media screen and (max-width: 1000px) and (min-width: 800px) { .tOfContents td a {padding:1rem;} .tOfContents caption {font-size:1.5rem;padding:1rem 0;} } @media screen and (max-width: 800px) and (min-width: 600px) { .tOfContents td a {padding:1.2rem;} .tOfContents caption {font-size:1.5rem;padding:1rem 0;text-align:center;} } @media screen and (max-width: 600px) and (min-width: 360px) { .tOfContents td a {padding:1.2rem;} .tOfContents caption {font-size:1.5rem;padding:1rem 0;text-align:center;} } @media screen and (max-width: 360px) and (min-width: 310px) { .tOfContents td a {padding:1.2rem;} .tOfContents caption {font-size:1.5rem;padding:1rem 0;text-align:center;} } @media screen and (max-width: 310px) { .tOfContents td a {padding:1.2rem;} .tOfContents caption {font-size:1.5rem;padding:1rem 0;text-align:center;} }

HTML

<div class="width100 m-top3rem"> <div class="gridBox"> <div class="gridBox--one"> 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </div> <div class="gridBox--two"> 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 </div> <div class="gridBox--three"> 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 </div> </div> </div>

Результат

Чтобы понять как работает наша решётка - измените разрешение экрана, например, сжав окно браузера, или откройте на мобильном устройстве.

1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2
3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3
Статьи о CSS
Автоматическая нумерация строк таблицы
Псевдоэлемент before в виде стрелки

Если остались вопросы - смело задавайте их в комментариях.

Поиск по сайту
Контакты и сотрудничество:
Рекомендую наш хостинг beget.ru
Пишите на info@urn.su если Вы:
1. Хотите написать статью для нашего сайта или перевести статью на свой родной язык.
2. Хотите разместить на сайте рекламу, подходящуюю по тематике.
3. Реклама на моём сайте имеет максимальный уровень цензуры. Если Вы увидели рекламный блок недопустимый для просмотра детьми школьного возраста, вызывающий шок или вводящий в заблуждение - пожалуйста свяжитесь с нами по электронной почте
4. Нашли на сайте ошибку, неточности, баг и т.д. ... .......
5. Статьи можно расшарить в соцсетях, нажав на иконку сети: