Как передать текст под изображением с двумя столбцами, определенными в начальной загрузке для изображения и другим для текста?

Question

У меня есть два столбца, один для изображения и один для текста на веб-странице, которую я сейчас разрабатываю.Он намеревался занять пустое место за краем изображения.Может кто-нибудь мне помочь?Спасибо.

Фактическая страница:

Что мне нужно:

код:

<div class="container" id="fadein2">
  <br>
  <br>
  <div class="row">
    <?php
            $select_stmt=$db->prepare("SELECT * FROM bairro ORDER BY id DESC;");    //sql select query
            $select_stmt->execute();
            while($row=$select_stmt->fetch(PDO::FETCH_ASSOC))
            {
            ?>
      <a class="linha_paginas"></a>
      <br>
      <div class="col-sm-12 row">
        <div class="col-sm-12 col-md-12 col-lg-6">
          <br>
          <br>
          <div class="col-sm-12" align="middle"><a class="fancybox" href="upload/bairro/<?php echo $row['image']; ?>" data-fancybox-group="gallery"><img src="upload/bairro/<?php echo $row['image']; ?>" id="imagem_esp" class="imagem img-fluid"></a></div>
        </div>
        <div class="col-sm-12 col-md-12 col-lg-6">
          <div class="col-sm-12 texto_paginas" id="titulo_urgeirica">
            <?php echo $row['titulo'];?>
          </div>
          <br>
          <div class="col-sm-12" id="texto_urgeirica">
            <?php echo $row['texto']?>
          </div>
          <br>
        </div>
        <br>
      </div>
  </div>
  <?php
            }
        ?>
</div>
</div>

Answer 1

Для него можно использовать свойство css shape-outside . В вашем случае shape-outside: polygon(); будет соответствовать вашей цели.

См. Первый ответ этой статьи для хорошей демонстрации.

Как обернуть текст вокруг изображения, используя HTML / CSS

Answer 2

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

img {
  float: left;
  width: 170px;
  height: 170px;
  margin-right: 15px;
}

<div class="row">

  <div class="col-lg-12 ">

    <p><img src="pineapple.jpg" alt="IMG place holder" style=""> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at ultrices magna, ac maximus sapien. Donec ultricies odio placerat, accumsan metus id, malesuada eros. Morbi at elit leo.
      In euismod magna eu imperdiet accumsan. Morbi egestas tempor orci eget congue. Quisque libero quam, tempor in purus sed, pellentesque condimentum mauris. Aliquam sed pellentesque risus. Nunc vestibulum, nunc non congue iaculis, turpis nisl fermentum
      nibh, et faucibus nibh mi et felis. Aliquam condimentum, justo eu aliquam pellentesque, nunc arcu hendrerit dolor, ac consequat nisi ligula ac dolor. Quisque eu metus sed nibh blandit sagittis et nec justo. Donec tincidunt mi at magna efficitur
      tristique. Pellentesque mi dui, ultricies vel elementum at, facilisis nec metus. Duis ornare urna diam, ut tristique elit venenatis id. Quisque luctus maximus quam, vulputate viverra enim euismod id. Sed efficitur suscipit sodales. Ut aliquet, erat
      a laoreet tempus, sem turpis posuere tellus, scelerisque mollis erat felis sed magna. Morbi nec orci aliquam, tempor lorem vel, ullamcorper urna. Donec fermentum congue nunc nec ultrices. Curabitur sagittis egestas mi eget feugiat. Aliquam vitae
      sodales nunc. Integer vehicula feugiat mauris, vitae porttitor dui mollis sit amet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse ipsum ligula, placerat sit amet metus a, rhoncus tincidunt nibh.
      Suspendisse odio diam, fringilla in justo in, mollis luctus nisi. Fusce a leo sed libero egestas tincidunt sit amet vitae erat. Morbi id tortor at leo lobortis suscipit eu sit amet libero. Morbi hendrerit, enim sed rutrum venenatis, tellus urna
      vulputate turpis, sed consectetur risus ante fermentum.
    </p>


  </div>
</div>