0

Как сделать так, чтобы картинка обтекала лист <ul> справа (каждая строчка должна упираться в картинку справа ), чтобы текст вплотную прилегал к ней?

img.bioPhoto {
  float: right;
  width: 200px;
  height: 200px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="content">
    <div class="bioCont">
      <ul class="bioContL">
        <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem odit doloremque illum nemo quibusdam repellendus fugit vero, ducimus corrupti ipsum ipsa est odio beatae, aut similique ad tempore placeat id?</li>
        <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum iure doloribus possimus autem, odio aperiam accusantium! Laborum sunt vero iusto assumenda architecto inventore? Sint officiis ipsam delectus, natus sit accusantium!</li>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. A illum magnam, ipsa cumque vero reprehenderit sed fuga iste, neque alias nam tempora ex expedita id inventore aliquid repellat aperiam reiciendis?</li>
        <li>Lorem, ipsum dolor.</li>
        <li>Lorem ipsum dolor sit amet consectetur.</li>
        <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. In iure eligendi nemo similique numquam.</li>
        <li>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt facere maiores tenetur repellendus consequatur numquam.</li>
        <li>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet vel consequatur amet et eaque, quam illum nostrum enim error distinctio, soluta eum tempora? Nesciunt laborum dicta distinctio. Distinctio, a harum.</li>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. A illum magnam, ipsa cumque vero reprehenderit sed fuga iste, neque alias nam tempora ex expedita id inventore aliquid repellat aperiam reiciendis?</li>
        <li>Lorem, ipsum dolor.</li>
        <img class="bioPhoto" src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg">
      </ul>
    </div>
  </div>
</body>

</html>

1 ответ 1

2

Так?

img.bioPhoto {
  float: right;
  width: 200px;
  height: 200px;
}
<img class="bioPhoto" src="//i.imgur.com/w0cvgoX.jpg">
<ul class="bioContL">
  <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem odit doloremque illum nemo quibusdam repellendus fugit vero, ducimus corrupti ipsum ipsa est odio beatae, aut similique ad tempore placeat id?</li>
  <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum iure doloribus possimus autem, odio aperiam accusantium! Laborum sunt vero iusto assumenda architecto inventore? Sint officiis ipsam delectus, natus sit accusantium!</li>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. A illum magnam, ipsa cumque vero reprehenderit sed fuga iste, neque alias nam tempora ex expedita id inventore aliquid repellat aperiam reiciendis?</li>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem ipsum dolor sit amet consectetur.</li>
  <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. In iure eligendi nemo similique numquam.</li>
  <li>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt facere maiores tenetur repellendus consequatur numquam.</li>
  <li>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet vel consequatur amet et eaque, quam illum nostrum enim error distinctio, soluta eum tempora? Nesciunt laborum dicta distinctio. Distinctio, a harum.</li>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. A illum magnam, ipsa cumque vero reprehenderit sed fuga iste, neque alias nam tempora ex expedita id inventore aliquid repellat aperiam reiciendis?</li>
  <li>Lorem, ipsum dolor.</li>
</ul>

2
  • Да спс, поч этого нигде нету, что КАРТИНКУ НУЖНО СТАВИТЬ ПЕРЕД ТЕКСТОМ
    – Netervey
    30 мар 2021 в 19:28
  • Чёт пару сайтов с "документацией" глянул и только в примерах это показывается
    – De.Minov
    31 мар 2021 в 8:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.