0

I have two columns, one for the image and one for the text on the web page that I am currently developing. What he intended was to occupy the empty space after the edge of the image. Can anyone help me? Thank you.

Actual Page:

image

What I need:

enter image description here

code:

<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>
Nazim Kerimbekov
  • 4,712
  • 8
  • 34
  • 58
Lucas Santos
  • 23
  • 7

2 Answers2

0

Instead of separating your image and text into 2 columns, you can group them in one and set image to float.

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>
Nazim Kerimbekov
  • 4,712
  • 8
  • 34
  • 58
joohong89
  • 1,241
  • 8
  • 15
0

You can use css shape-outside property for it. In your case, shape-outside: polygon(); will match for your purpose.

See this article's first answer for a nice demo.

How to wrap text around an image using HTML/CSS

Meow Kim
  • 445
  • 4
  • 14