🏠 | 💻  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."

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

Предположим я хочу показать обзор на велосипед Stels Pilot 950

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

Stels Pilot 950

Это самый дешёвый из линейки полноразмерных складных велосипедов от российского производителя велосипедов Stels.

Выпускается в двух вариантах: с рамой 17,5 и 19 дюймов. Причём больший вариант был полностью раскуплен в Санкт-Петербурге уже к середине июля.

Как менялась цена

Цена Стелс Пилот 950 летом 2018-го года была в районе 13 950 рублей в июне и июле и достигла 15 500 к концу лета.

На этой отметке она держалась и осенью, несмотря на начинающийся сезон скидок и распродаж. Велосипед, даже на некоторое время снимали с производства, но, видимо, из-за высокой популярности вернули.

В конце сезона 2019 цена составляла 17 000 рублей.

Сейчас цена составляет около 19000 рублей.

Проверить цены: в магазине Велодрайв КУПИТЬ

Переходите по ссылке чтобы прочитать весь обзор и сравнение с другими складными велосипедами.

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

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; }

Результат

Stels Pilot 950

Это самый дешёвый из линейки полноразмерных складных велосипедов от российского производителя велосипедов Stels.

Выпускается в двух вариантах: с рамой 17,5 и 19 дюймов. Причём больший вариант был полностью раскуплен в Санкт-Петербурге уже к середине июля.

Как менялась цена

Цена Стелс Пилот 950 летом 2018-го года была в районе 13 950 рублей в июне и июле и достигла 15 500 к концу лета.

На этой отметке она держалась и осенью, несмотря на начинающийся сезон скидок и распродаж. Велосипед, даже на некоторое время снимали с производства, но, видимо, из-за высокой популярности вернули.

В конце сезона 2019 цена составляла 17 000 рублей.

Сейчас цена составляет около 19000 рублей.

Проверить цены: в магазине Велодрайв КУПИТЬ

Переходите по ссылке чтобы прочитать весь обзор и сравнение с другими складными велосипедами.

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

Достаточно там, где Вы хотите остановить обтекание разместить элемент, например 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) { .tcont caption {font-size:1.5rem;padding:1rem 0;text-align:left;} .tcont td {font-size:1.4rem;} .tcont td a {padding:1.2rem;} } @media screen and (max-width: 1840px) and (min-width: 1200px) { .tcont caption {font-size:1.5rem;padding:1rem 0;text-align:left;} .tcont td {font-size:1.4rem;} .tcont td a {padding:1.2rem;} } @media screen and (max-width: 1199px) and (min-width: 1000px) { .tcont td a {padding:1.2rem;} .tcont caption {font-size:1.5rem;padding:1rem 0;} } @media screen and (max-width: 1000px) and (min-width: 800px) { .tcont td a {padding:1rem;} .tcont caption {font-size:1.5rem;padding:1rem 0;} } @media screen and (max-width: 800px) and (min-width: 600px) { .tcont td a {padding:1.2rem;} .tcont caption {font-size:1.5rem;padding:1rem 0;text-align:center;} } @media screen and (max-width: 600px) and (min-width: 360px) { .tcont td a {padding:1.2rem;} .tcont caption {font-size:1.5rem;padding:1rem 0;text-align:center;} } @media screen and (max-width: 360px) and (min-width: 310px) { .tcont td a {padding:1.2rem;} .tcont caption {font-size:1.5rem;padding:1rem 0;text-align:center;} } @media screen and (max-width: 310px) { .tcont td a {padding:1.2rem;} .tcont caption {font-size:1.5rem;padding:1rem 0;text-align:center;} }

HTML

<div class="w100 mt3"> <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. Статьи можно расшарить в соцсетях, нажав на иконку сети: