Проблема, с которой вы сталкиваетесь, скорее всего связана с позиционированием элементов на вашей веб-странице. Чтобы текст не находился под фото и не выходил за его пределы, можно использовать следующие способы:
1. **CSS Flexbox**:
Flexbox — это технология CSS, которая позволяет управлять расположением элементов в контейнере. Вы можете создать контейнер для изображения и текста, и использовать свойства Flexbox, такие как display: flex, flex-direction, align-items и justify-content, чтобы управлять их размещением на странице.
Пример кода:
<div style="display: flex; align-items: center;">
<img src="photo.jpg" style="max-width: 50%;">
<p style="margin-left: 20px;">Ваш текст здесь</p>
</div>
2. **CSS Grid**:
CSS Grid — еще один способ управления расположением элементов на странице. Вы можете определить сетку изображения и текста, используя свойства CSS Grid, такие как display: grid, grid-template-columns, grid-template-rows и grid-gap.
Пример кода:
<div style="display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px;">
<img src="photo.jpg" style="max-width: 50%;">
<p>Ваш текст здесь</p>
</div>
3. **Позиционирование**:
Вы также можете использовать свойства CSS position: relative для контейнера с изображением и position: absolute для изображения, чтобы точно установить его положение на странице. При этом текст будет обтекать изображение.
Пример кода:
<div style="position: relative;">
<img src="photo.jpg" style="max-width: 50%; position: absolute; top: 0; left: 0;">
<p style="margin-left: 20px;">Ваш текст здесь</p>
</div>
Используйте один из этих способов в зависимости от ваших предпочтений и требований дизайна. Не забудьте также учитывать адаптивность вашего дизайна для корректного отображения на различных устройствах.