如何使文本填充左边缘为负的图像（旁边）创建的间隙？

Question

基本上，我们必须具有这种布局，其中图像必须从容器中溢出，并且文本填充由图像创建的空间（向左偏移）。

我们目前具有以下结构：

<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;的地方。但是，由于图像不在同一列中，因此图像会创建一个间隙，并且文本不会被填充。我们需要的是文本填充图像在向左偏移时创建的间隙。

我们如何实现这种布局？

Answer 1

这是我的解决办法，

我将图像和文本分为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>