Не понимаю, почему не происходит обтекание картинки текстом. Помогите пожалуйста разобраться.
Вот код:
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Пример</title>
</head>
<div class="box">
<figure class="picture">
<img
src="Sam_Houston_portrait.jpg"
title="Хьюстон"
alt="Тут должно быть фото Хьюстона"
width="25%"
height="25%"
>
<figcaption>Сэмюэла Хьюстона</figcaption>
</figure>
<p>Город назван в честь Сэмюэла Хьюстона — главнокомандующего армией Техаса во время Техасской революции (1835—1836) и президента Республики Техас (1836—1838, 1841—1844).</p>
<p>Официальное прозвище Хьюстона — «Space city», которое можно перевести, как «космический город», «город космонавтики» или «космоград». Название дано из-за того, что здесь
находится космический центр имени Линдона Джонсона. Всего город имеет 12 прозвищ.</p>
<p>В американской разговорной речи есть популярная фраза: «Хьюстон, у нас проблема» (англ. Houston, we’ve had a problem), появившаяся после неудачной миссии Аполлон-13.
В Хьюстоне проходили съёмки фильма «Аполлон-13», в основу сюжета которого легли реальные события миссии.</p>
</div>
</body>
</html>
И
СSS
.text{
color: rgba(31, 31, 31, 0.863);
}
.picture{
float: right;
}
.box{
margin: 25%;
border: 2px solid rgba(44, 25, 25, 0.466);
padding: 2%;
}
Простой
