Что сказать? CSS с этим прекрасно справляется.
Имеем:
<img src="..." alt="..." height="" width="" /> <p>Text text text...</p>
<img src="..." alt="..." height="" width="" /> <p>Text text text...</p>
<img src="..." alt="..." height="" width="" /> <p>Text text text...</p>
Если бы это было в "теле" HTML-документа, ответ на вопрос заголовка сообщения блога - это буквально две строки CSS:
body { display: grid; grid-template-columns: min-content 1fr; }
И выглядело бы это примерно так:
Круто. Спасибо CSS. Но давайте немного подшаманим макет, установим небольшой пробел между фото и текстом.
body { display: grid; padding: 2rem; grid-template-columns: 300px 1fr; gap: 1rem; align-items: center; max-width: 800px; margin: 0 auto; font: 500 100%/1.5 system-ui; }
img { max-width: 100%; height: auto; }
Имеем следующее:
Ну и для лакировки всего этого добавим возможность корректного отображения нашего творения на мобильных устройствах:
@media (max-width: 650px)
{ body {
display: block; font-size: 80%;
}
p {
position: relative; margin: -3rem 0 2rem 1rem; padding: 1rem; background: rgba(white, 0.8);
}
}
Ну вот и все, пользуемся!