Для того чтобы сделать так, чтобы текст сместился под изображения в HTML, вы можете использовать стили CSS. Существует несколько способов достичь этой цели. Вот несколько примеров:
1. Floating (плавающий) элементы: Вы можете использовать CSS свойство float для изображений, чтобы текст обтекал их. Например:
<img src="example.jpg" style="float: left; margin-right: 10px;"> <p>Текст, который будет смещаться под изображением.</p>
В этом примере, изображение будет смещено влево (float: left), а текст будет обтекать его справа.
2. Flexbox: Вы также можете использовать CSS свойство display: flex для обертки, содержащей изображение и текст, чтобы управлять их позиционированием. Например:
<div style="display: flex; align-items: flex-start;"> <img src="example.jpg" style="margin-right: 10px;"> <p>Текст, который будет смещаться под изображением.</p> </div>
В этом примере, обертка будет выстраивать элементы в строку (display: flex), а свойство align-items устанавливает выравнивание элементов по верхнему краю, чтобы текст был смещен ниже изображения.
3. Grid: Если ваша цель более сложное решение, вы можете использовать CSS свойство display: grid для создания сетки, где изображение занимает одну ячейку, а текст занимает другую. Например:
<div style="display: grid; grid-template-columns: max-content auto;"> <img src="example.jpg" style="margin-right: 10px;"> <p>Текст, который будет смещаться под изображением.</p> </div>
В этом примере, сетка создается с двумя столбцами (max-content для изображения и auto для текста), и текст будет помещаться под изображением.
Это лишь несколько примеров того, как можно сделать так, чтобы текст сместился под изображения в HTML. В зависимости от ваших конкретных потребностей и структуры вашей страницы, вы можете выбрать подходящий метод.