Question

我有一个包含图像和文字的div块：

<div style="position: relative; margin-bottom: 90px;"><img src="https://cdn2.hubspot.net/hubfs/4022333/Blog/TOFU/quote.png" style="width: 112px;">
<div style="position: absolute; top: 50px; left: 78px;">
<p style="font-family: AvenirLight; color: #74818a; font-size: 36px; line-height: 45px; font-style: italic;">“Enabling understanding means being able to communicate effectively”</p>
</div>
</div>

我在父div上应用了margin-bottom: 90px;，以便在div和可能位于其下方的任何p标记之间创建一个间隙。

它在完整显示时工作正常，但在移动设备上，它看起来像这样：

如您所见，它在p之后与以下div标记重叠。我怎样才能解决这个问题？理想情况下，我希望父div与div之外的任何内容之间存在20px间隙。

编辑：

我觉得我的做法是错的。即如果我从上面的代码中移除margin-bottom: 90px;，则div仍会与以下p个标记重叠：

Answer 1

其他元素与quote元素重叠的原因是因为主要决定元素高度的元素（包含div的{{1}}）具有{{1}位置。 paragraph定位元素不再是父元素的一部分（除非父元素具有absolute位置）。因此，在这种情况下，因为absolute与relative不再是＆＃39;部分＆＃39;在父级中，父级只有基于div / paragraph定位元素的高度。这是图像。

作为解决方案，您可以将static元素的relative位置切换为absolute元素。您知道图像的宽度和高度，因此您可以为段落元素设置p。在这种情况下，父div的高度（在我的示例中称为img）将具有正确的高度，因此padding之上或之下的元素不会与您的元素重叠。

＆＃13;

.quote-wrapper

＆＃13;

.quote-wrapper

＆＃13;

Answer 2

您可以将margin-top放在标记p中。我建议您为每个代码（id，class ...）添加div或p，以使结构更容易，并且标签不会重叠。

Answer 3

尝试以这种方式编辑html代码，并将此media query添加到您的代码中。

<div style="position: relative; margin-bottom: 90px;"><img src="https://cdn2.hubspot.net/hubfs/4022333/Blog/TOFU/quote.png" style="width: 112px;">
  <div style="position: absolute; top: 50px; left: 78px;" class="quotation">
    <p style="font-family: AvenirLight; color: #74818a; font-size: 36px; line-height: 45px; font-style: italic;">“Enabling understanding means being able to communicate effectively”</p>
  </div>
</div>

@media screen and (max-width: 767px) {
  .quatation {
    position: static !important;
  }
}

Answer 4

问题在于标题的绝对位置。我推荐以下结构免费为所有分辨率和设备犹豫不决。

.block-quote {
    display:block;
    margin:0;
    padding:20px 0 0 70px;
    background:url(https://cdn2.hubspot.net/hubfs/4022333/Blog/TOFU/quote.png) 0 0 no-repeat;
}

h2 {
    font-family: 'AvenirLight'; 
    color: #74818a; 
    font-size: 36px; 
    line-height: 45px; 
    font-style: italic;
}

<div class="block-quote">
    <h2>“Enabling understanding means being able to communicate effectively”</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sollicitudin vulputate vehicula. Morbi fermentum elit lobortis nibh molestie, nec facilisis elit tempor. Nullam porta lectus erat, et hendrerit diam dictum at. Vestibulum sed enim turpis. Sed vehicula venenatis cursus. Mauris sit amet venenatis velit. Nullam ut purus erat. Nam posuere lorem at est ultrices luctus.</p>
</div>

Div重叠移动预览

4 个答案: