Обтекание текста вокруг отзывчивого изображения

Question

Есть ли способ обтекания текста вокруг адаптивного изображения, используя макет начальной загрузки?Я пытаюсь избежать использования медиа-запросов.По сути, это то, к чему я стремлюсь:

Я пробовал множество различных вариантов строк и столбцов, чтобы заставить это работать.Возможно, я слишком упрям ​​и должен просто использовать медиа-запросы, но я подумал, что, может быть, кто-то там нашел решение с помощью сетки начальной загрузки.Вот с чем я сейчас работаю.

<div class="container">
  <div class="row">
    <div class="col">
      <h3>Lorem Ipsum</h3>
    </div>
  </div>
  <div class="row">
    <div class="col-md-5 col-lg-4">
      <img class="img-fluid" src=https://www.clipartqueen.com/image-files/small-face-silhouette.png alt="Photo of me">
    </div>
    <div class="col-md-6 col-lg-7">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit ligula nec est aliquet ullamcorper. Suspendisse et semper lectus, vitae pellentesque tortor. Etiam bibendum leo ligula, id aliquam urna interdum ac. In egestas ornare mauris eget rutrum.
        Pellentesque viverra suscipit nibh, vitae laoreet diam semper non. <br /><br /> Ut consequat scelerisque molestie. Vivamus vel lacus in ligula varius luctus non at diam. Suspendisse vitae tortor felis. Phasellus rutrum sapien ut lectus
        pretium, ut ullamcorper enim dictum. Nam sagittis tempus dignissim.
      </p>
    </div>
  </div>
</div>

Answer 1

Вы можете сделать его одним столбцом вместо двух столбцов.Bootstrap 4 по умолчанию float-sm-left, pr-3, pb-3 класс для выравнивания отступов и плавающего элемента.Вы можете настроить чувствительность, изменив float-sm-left на float-md-left, float-lg-left, float-xl-left в зависимости от ваших требований.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col">
      <h3>Lorem Ipsum</h3>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <img class="img-fluid float-sm-left pr-3 pb-3" src=https://www.clipartqueen.com/image-files/small-face-silhouette.png alt="Photo of me">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit ligula nec est aliquet ullamcorper. Suspendisse et semper lectus, vitae pellentesque tortor. Etiam bibendum leo ligula, id aliquam urna interdum ac. In egestas ornare mauris eget rutrum.
        Pellentesque viverra suscipit nibh, vitae laoreet diam semper non. Ut consequat scelerisque molestie. Vivamus vel lacus in ligula varius luctus non at diam. Suspendisse vitae tortor felis. Phasellus rutrum sapien ut lectus pretium, ut ullamcorper enim dictum. Nam sagittis tempus dignissim.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit ligula nec est aliquet ullamcorper. Suspendisse et semper lectus, vitae pellentesque tortor. Etiam bibendum leo ligula, id aliquam urna interdum ac. In egestas ornare mauris eget rutrum.
      </p>
    </div>
  </div>
</div>

Answer 2

Вы можете просто обернуть содержимое простым float:left

Попробуйте это.

.row .col-md-5{float:left;}
.row{max-width:550px;}/*optional*/

<div class="container">
  <div class="row">
    <div class="col">
      <h3>Lorem Ipsum</h3>
    </div>
  </div>
  <div class="row">
    <div class="col-md-5 col-lg-4">
      <img class="img-fluid" src=https://www.clipartqueen.com/image-files/small-face-silhouette.png alt="Photo of me">
    </div>
    <div class="col-md-6 col-lg-7">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit ligula nec est aliquet ullamcorper. Suspendisse et semper lectus, vitae pellentesque tortor. Etiam bibendum leo ligula, id aliquam urna interdum ac. In egestas ornare mauris eget rutrum.
        Pellentesque viverra suscipit nibh, vitae laoreet diam semper non. <br /><br /> Ut consequat scelerisque molestie. Vivamus vel lacus in ligula varius luctus non at diam. Suspendisse vitae tortor felis. Phasellus rutrum sapien ut lectus
        pretium, ut ullamcorper enim dictum. Nam sagittis tempus dignissim.
      </p>
    </div>
  </div>
</div>

PS: Я установил max-width только для того, чтобы убедиться, что содержимое переносится.

Answer 3

Вы можете использовать .float-left для обтекания текста вокруг изображения:

.mw-25 {
  max-width: 25%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col">
      <h3>Lorem Ipsum</h3>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div>
        <img class="img float-left mw-25 border" src=https://www.clipartqueen.com/image-files/small-face-silhouette.png alt="Photo of me">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit ligula nec est aliquet ullamcorper.</p>
        <p>Suspendisse et semper lectus, vitae pellentesque tortor. Etiam bibendum leo ligula, id aliquam urna interdum ac. In egestas ornare mauris eget rutrum.Pellentesque viverra suscipit nibh, vitae laoreet diam semper non.</p>
        <p>Ut consequat scelerisque molestie. Vivamus vel lacus in ligula varius luctus non at diam. Suspendisse vitae tortor felis. Phasellus rutrum sapien ut lectus pretium, ut ullamcorper enim dictum. Nam sagittis tempus dignissim.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit ligula nec est aliquet ullamcorper.</p>
        <p>Suspendisse et semper lectus, vitae pellentesque tortor. Etiam bibendum leo ligula, id aliquam urna interdum ac.</p>
      </div>
    </div>
  </div>
</div>

Answer 4

<style type="text/css">
      @media only screen and (max-width:480px) {
                  img {
                      display:block;
                      float:none;
                      margin:0 auto 20px !important;
                  }
              }
    </style>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
  </head>
  <body style="margin:0; background:#000;">
   
    <div style="max-width:600px; margin:0 auto; background:#fff; overflow:hidden;">
      <div style="Margin:20px;">
        
        <img src="https://www.clipartqueen.com/image-files/small-face-silhouette.png" align="right" width="140" height="140" border="0" style="Margin:0 0 20px 20px; background:#E79851;"/>
            
        <p style="Margin:0; font:16px/1.25 sans-serif; color:#4CB3E8; text-align:justify;">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. Hic illum vitae iusto aspernatur tempora voluptatem id dolor reiciendis amet ea iste similique fuga, accusamus quibusdam, atque itaque quae sit dolorem asperiores facilis, fugit odio eveniet. Autem iusto nisi, minus sunt fuga quas sed expedita incidunt veniam nobis id ab. Blanditiis ullam laboriosam, quibusdam fugiat repellat labore nulla natus minima at, a veritatis nostrum dignissimos ipsa libero, voluptatem itaque!
            </p>
      </div>
    </div>
  </body>
</html>