Question

我有一系列的div，其中包含两个内部div。这些内部div之一中的段落与它下面的段落重叠。一切似乎都与另一个内部div中的img对齐。查看图片：

这是我正在使用HTML的代码，此代码段重复执行，标签或css均未更改：

    .research_area {
      @include size(mdu) {
      }
      @include size(lgu) {
        padding: 0px 80px;
      }
      @include size(xlu) {
        padding: 0px 180px;
      }
      padding-bottom: 100px;
    }
    
    .research_area .research_left {
      display: inline-block;
      padding-right: 20px;
    }
    
    .research_area .research_right {
      display: inline-block;
      position: absolute;
      h4 {
        margin-top: 1px;
      }
      p {
        max-width: 680px;
        font-size: 90%;
      }
    }

<div>
      <div class="research_area clearfix">
        <div class="research_left">
         <img src="https://via.placeholder.com/150C/O https://placeholder.com/" />
        </div>
      <div class="research_right">
        <h4><img src="https://via.placeholder.com/150C/O https://placeholder.com/" /></h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do  eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim diam quis enim lobortis.</p>
      </div>
    </div>

Answer 1

请尝试使用CSS的flexbox布局，而不是使用position: absolute;来使图像与图像内联显示。 flex不会强制元素出现在某个位置，而不会考虑布局中的其他内容（导致溢出问题），而是根据内容而流畅地显示元素。

请参见以下示例：

.research_area {
  display: flex;
}

.research_area .research_left {
  padding-right: 20px;
}

.research_area .research_right h4 {
  margin-top: 1px
}

.research_area .research_right p {
  max-width: 680px;
  font-size: 90%;
}

img {
  max-width: 100%;
}

<div>
  <div class="research_area clearfix">
    <div class="research_left">
      <img src="http://placekitten.com/200/200" />
    </div>
  <div class="research_right">
    <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do  eiusmod tempor incididunt</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do  eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim diam quis enim lobortis.</p>
  </div>
</div>
<div>
  <div class="research_area clearfix">
    <div class="research_left">
      <img src="http://placekitten.com/200/200" />
    </div>
  <div class="research_right">
    <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do  eiusmod tempor incididunt</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do  eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim diam quis enim lobortis.</p>
  </div>
</div>
<div>
  <div class="research_area clearfix">
    <div class="research_left">
      <img src="http://placekitten.com/200/200" />
    </div>
  <div class="research_right">
    <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do  eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim diam quis enim lobortis.</p>
  </div>
</div>

如何阻止div彼此叠加？

1 个答案: