Question

我有一个绝对的div，在全屏看起来很好。

在屏幕调整大小时，绝对div重叠<p>。

我怎样才能确保无论屏幕尺寸如何，div都不会重叠（或重叠）并且每个元素的间距约为15px？

p {
  color: #333333;
  font-family: "AvenirNextLTW01-Regular", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5em;
  margin: 0 0 1.5em;
}

<div class="quote-block" style="position: relative; margin-bottom: 60px;"><img src="https://cdn2.hubspot.net/hubfs/4022333/Blog/TOFU/quote.png?t=1528796131649" style="width: 58px;">
  <div style="position: absolute; top: 5px; left: 70px;" class="quotation">
    <p style="font-family: AvenirLight; color: #74818a; font-size: 28px; line-height: 28px; font-style: italic;">"As a technology buyer, when I am selecting between potential technology solution providers, I ask myself not ‘ if’, but ‘when’, we run into challenges, which solution provider do I most want to be resolving the issues with?"</p>
  </div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Answer 1

为什么使用绝对/相对div来创建此布局？

尝试使用flex，就像我在下面的代码段中所做的那样。

＆＃13;

p {
  color: #333333;
  font-family: "AvenirNextLTW01-Regular", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5em;
  margin: 0 0 1.5em;
}

.quote-block {
  display: flex;
  align-items: flex-start;
}

＆＃13;

<div class="quote-block" style=""><img src="https://cdn2.hubspot.net/hubfs/4022333/Blog/TOFU/quote.png?t=1528796131649" style="width: 58px;">
  <div class="quotation">
    <p style="margin-left: 20px;font-family: AvenirLight; color: #74818a; font-size: 28px; line-height: 28px; font-style: italic;">"As a technology buyer, when I am selecting between potential technology solution providers, I ask myself not ‘ if’, but ‘when’, we run into challenges, which solution provider do I most want to be resolving the issues with?"</p>
  </div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

＆＃13;

Answer 2

试试这个。

＆＃13;

p {
  color: #333333;
  font-family: "AvenirNextLTW01-Regular", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5em;
  margin: 0 0 1.5em;
}
.quotation:before{
  background:url("https://cdn2.hubspot.net/hubfs/4022333/Blog/TOFU/quote.png?t=1528796131649") no-repeat left top;
  width:79px;
  height:58px;
  left:0;
  position:absolute;
  content:"";      
}
.quotation{
  position:relative;
  padding-left:100px;
}

＆＃13;

<div class="quote-block" style="position: relative; margin-bottom: 60px;">
  <div class="quotation">
    <p style="font-family: AvenirLight; color: #74818a; font-size: 28px; line-height: 28px; font-style: italic;">"As a technology buyer, when I am selecting between potential technology solution providers, I ask myself not ‘ if’, but ‘when’, we run into challenges, which solution provider do I most want to be resolving the issues with?"</p>
  </div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

＆＃13;

没有任何重叠的绝对div

2 个答案: