如何使文本填充由具有负左边距的图像（旁边）创建的空白？

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

这是我的解决方案，

我将图像和文本分成两部分，然后我给文本部分的宽度等于图像的宽度

 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>