Обтекание элемента текстом в ЦСС задаётся свойством float. Текст обтекает элемент по границам его прямоугольного бокса, что не всегда красиво:
<p>…</p>
<img class="float" src="./foo.jpg">
<p>…</p>
.float {
width: 40%;
float: right;
margin-left: 10px;
}Цитата как бы придвигает к нам прошлое, при этом тавтология выбирает словесный размер, что нельзя сказать о нередко манерных эпитетах. Эстетическое воздействие, как бы это ни казалось парадоксальным.
Теория вчувствования многопланово продолжает суггестивный социально‑психологический фактор. Символизм изящно диссонирует горизонт ожидания. Фантазия, согласно традиционным представлениям, характерна.
shape‑outside. МДН
Свойство shape-outside указывает фигуру, по форме которой текст должен обтекать элемент. Чаще всего пригождается круг:
shape‑outside. МДН
<p>…</p>
<img class="float" src="./foo.jpg">
<p>…</p>
.float {
width: 40%;
float: right;
margin-left: 10px;
shape-outside: circle(50%);
}Цитата как бы придвигает к нам прошлое, при этом тавтология выбирает словесный размер, что нельзя сказать о нередко манерных эпитетах. Эстетическое воздействие, как бы это ни казалось парадоксальным.
Теория вчувствования многопланово продолжает суггестивный социально‑психологический фактор. Символизм изящно диссонирует горизонт ожидания. Фантазия, согласно традиционным представлениям, характерна.
Сам float‑элемент можно сделать пустым и так экспериментировать с формой текста:
<p>…</p>
<div class="cut"></div>
<p>…</p>
.cut {
float: right;
width: 40%;
aspect-ratio: 1/1;
margin-left: 10px;
shape-outside: circle(50%);
}Цитата как бы придвигает к нам прошлое, при этом тавтология выбирает словесный размер, что нельзя сказать о нередко манерных эпитетах. Эстетическое воздействие, как бы это ни казалось парадоксальным.
Теория вчувствования многопланово продолжает суггестивный социально‑психологический фактор. Символизм изящно диссонирует горизонт ожидания. Фантазия, согласно традиционным представлениям, характерна.
Clippy — визуальный редактор функции polygon для ЦСС
В shape-outside можно указать и фигуру произвольной формы, нарисовав её по точкам функцией polygon. Чтобы не рисовать вслепую, используйте визуальный редактор Clippy и копируйте код фигуры оттуда.
Clippy — визуальный редактор функции polygon для ЦСС
<div class="cut">
<p>…</p>
<p>…</p>
.cut {
width: 60%;
aspect-ratio: 1/1;
float: right;
/* Треугольник из трёх точек */
shape-outside: polygon(100% 0, 0 100%, 100% 100%);
}
Цитата как бы придвигает к нам прошлое, при этом тавтология выбирает словесный размер, что нельзя сказать о нередко манерных эпитетах. Эстетическое воздействие, как бы это ни казалось парадоксальным.
Теория вчувствования многопланово продолжает суггестивный социально‑психологический фактор. Символизм изящно диссонирует горизонт ожидания. Фантазия, согласно традиционным представлениям, характерна.
Когда используете обтекание, особенно с shape-outside, — обязательно проверяйте вид и читаемость текста на разных устройствах и размерах экранов. Если форма текста меняется на разных размерах экрана — убедитесь, что обтекание при этом не сбивается и выглядит нормально.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.