Загрузка...Перемещение изображения вправо или влево с обтеканием текста? Float-блок – это простая задача, но как насчет перемещения изображения в нижний левый или нижний правый угол.
На первый взгляд теперь это кажется сложной задачей, наверное, чтобы справиться с ней, может понадобиться JS?
На самом деле – нет, всё это легко делается с помощью всего нескольких строк CSS!
Для внесения ясности разберем код.
<div class="wrapper">
<div class="box">
<div class="float"><img></div>
Lorem ipsum dolor ...
</div>
</div>.wrapper {
display:flex;
}
.float {
float:right;
height:100%;
display:flex;
align-items:flex-end;
shape-outside:inset(calc(100% - 100px) 0 0);
}[wrapper]
Основной div должен быть flexbox-контейнером. Flexbox позволяет полагаться, по умолчанию, на выравнивание по растяжению чтобы иметь возможность использовать height:100%.
[box]
Это flex-элемент и здесь ему не нужен какой-либо конкретный CSS. Этот элемент будет определять высоту своего контейнера (wrapper) и, поскольку это flex-элемент, он будет растянут до своей собственной высоты. При растяжении такое поведение даст эталонную высоту, которую могут использовать дочерние элементы.
Из спецификации:
If the flex item has align-self: stretch, redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved.
[float]
“Плавающий” float-элемент рядом с текстовым содержимым, благодаря сложному вычислению высоты, будет занимать всю высоту. Внутри этого элемента изображение перемещается вниз с помощью flexbox. До сих пор ничего сложного и код должен выдавать следующее:
Теперь немного магии с помощью css-свойства shape-outside. CSS-свойство shape-outside определяет произвольную фигуру, которую обтекает соседнее содержимое. По умолчанию это содержимое обтекает по внешней границе, с учётом margin. shape-outside предоставляет возможность настроить обтекание текстом объекты сложной формы.
inset() определяет область вставленного прямоугольника. Первые четыре аргумента представляют собой верхнее, правое, нижнее и левое смещения внутрь от ссылочного блока, которые определяют расположение краев вставленного прямоугольника.
Итак, с помощью shape-outside: inset(calc(100% - X) 0 0) создаётся вставка-прямоугольник, которая начинается точно в верхней части изображения, так как координата top будет равна 100% - X, где X – высота (height) изображения, а 100% – это высота float-элемента.
Такой трюк позволит тексту обернуть свободное пространство над изображением, т.е. плавающее изображение окажется прижатым к правому нижнему углу блока с текстом. С помощью значения float: left можно легко переместить изображение в левый нижний угол.
Используя вышесказанное, можно реализовать более необычные ситуации. Вот некоторые из них: