How to wrap around a "figure"?

P

Pavel Zaitsev2020-04-18 13:19:24

css

Pavel Zaitsev, 2020-04-18 13:19:24

I don't understand why the text doesn't wrap around the image. Please help me figure it out.

Here is the code:
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>

and CSS

.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%;
}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Ankhena, 2020-04-18
@OmniaNightmare

https://jsfiddle.net/xyzus9b2/
and the width and height attributes should not have % sizes