Как заставить текст заполнить пробел, созданный изображением (рядом с ним), имеющим отрицательное левое поле? - PullRequest
Новая
       17

Как заставить текст заполнить пробел, созданный изображением (рядом с ним), имеющим отрицательное левое поле?

0 голосов
/ 05 мая 2019

По сути, у нас должна быть такая компоновка, в которой изображение должно вытекать из контейнера, а текст заполняет пространство, созданное изображением (которое смещено влево).

enter image description here

В настоящее время у нас есть такая структура: 

<div class="container">
  <div class="row">
    <div class="col">
       Some paragraph
    </div>

    <div class="row">
      <div class="col-5 body-img-col">
        <div class="body-img-wrap">
            <img src="images/some-image.jpg" alt="" />
        </div>
      </div>

      <div class="col-7">
        Some paragraph
      </div>
    </div>

    <div class="col">
       Some paragraph
    </div>
  </div>
</div>

Где body-img-wrap img установлено на margin-left: -100px;. Однако есть пробел, который создает изображение, и текст не будет заполнять его, поскольку он не находится в том же столбце. Нам нужно, чтобы текст заполнил промежуток, создаваемый изображением при смещении влево.

Как мы можем добиться такого рода макета?

1 Ответ

1 голос
/ 05 мая 2019

Вот мое решение,

Я разделил изображение и текст на 2 части, затем я присвоил ширину текстовой части, равную ширине изображения, используя 

 width: calc(100% - 200px);


.left-sec {
  width: 200px;
  height: auto;
}

.right-sec {
  width: calc(100% - 200px);
  padding-left: 15px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="container">
    <div class="row">
      <div class="col">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem error voluptas perspiciatis, possimus temporibus repudiandae facilis. Reiciendis eius eveniet voluptas est sapiente deserunt veritatis, eos earum et. Beatae, quae eaque.
      </div>

      <div class="row">

        <img class="left-sec" src="https://placehold.it/200x200" alt="" />


        <div class="right-sec">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ab, quaerat. Necessitatibus adipisci doloremque optio aperiam placeat quis laudantium, quos quia iste hic qui rerum architecto quibusdam dolor? Perferendis, iure.
        </div>
      </div>

      <div class="col">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, officia, consequatur. Commodi fugit, soluta tenetur cumque eum laboriosam unde, expedita nemo eos. Praesentium velit quam itaque vel harum sit odit.
      </div>
    </div>
  </div>
</div>
...