Обтекание одного блока другим CSS
| Задача | |
| Решение с помощью float | |
| Остановить обтекание | |
| Решение с помощью Grid | |
| Другие статьи о СSS |
Задача
Нужно чтобы один блок был слева от другого, а когда высота этого блока закончится - нужно чтобы текст второго блока был под первым.
Решение с помощью 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.
Выпускается в двух вариантах: с рамой 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.
Выпускается в двух вариантах: с рамой 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>
Результат
Чтобы понять как работает наша решётка - измените разрешение экрана, например, сжав окно браузера, или откройте на мобильном устройстве.
| CSS | |
| Обтекание одного блока другим | |
| Автоматическая нумерация строк таблицы | |
| Псевдоэлемент before в виде стрелки | |
| Поменять вертикально расположенные блоки местами | |
| Wildcard в id |