jquery - 如何在屏幕宽度变化时阻止两个内部 div 重叠

Question

我有三个导语，每个导语都包含图像、标题、段落和按钮(从上到下)。我的问题是当屏幕尺寸扩大时，段落开始与按钮重叠。按钮位置需要在每个宣传语中保持一致。它当前定位为绝对，底部属性为 40 像素。我愿意接受仅使用 HTML/CSS 或 Jquery 的修复。任何帮助深表感谢。谢谢。

.history_link {
  position: relative;
  width: 33.33%;
  height: 599px;
}

.history_link h3 {
  text-align: center;
}

.learn_btn {
  margin-top: 20px;
  width: 150px;
  padding: 10px;
  position: absolute;
  bottom: 40px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

.rs_caption p {
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  padding-top: 30px;
  text-align: center;
}

.history_link img {
  width: 60%;
  margin-left: 20%;
  margin-left: 20%;
  padding: 35px 0px 0px 0px;
}

<div class="history_link col span_4">
  <div class="why_rs_link">
    <img src="<?php bloginfo('template_directory'); ?>/img/history_icon.png" />
    <h3>Our History</h3>
    <div class="rs_caption">
      <p>Founded by teacher and mentor Patricia DeOrio, herself dyslexic, we’ve always understood what it takes to unlock the potential of children with learning differences.</p>
      <a href="http://riversideschool.rpmdevserver.com/our-history/">
        <h2 class="learn_btn">LEARN MORE</h2>
      </a>
    </div>
  </div>
</div>

button with absolute positioning displaying correctly

button with absolute positioning with overlap when screen size expands

Answer 1

绝对定位将元素从当前文档流中取出(不占用空间)并相对于最近定位的祖先进行定位。如果没有定位的祖先元素，则该元素将相对于视口(viewport)(浏览器窗口)定位。这就是为什么您的按钮会以不同的视口(viewport)大小覆盖您的文本。

在您的屏幕截图中没有理由使用绝对定位。您的设计是一个容器中的三个垂直堆叠元素。这是 block 级元素的默认流，占据容器元素的整个宽度并从其自己的行/行开始。

Top 将按钮保持在底部你需要确保每个组件只占用一定数量的空间，即设置一些子组件的高度，比如 p。虽然我自己会选择 flexbox 解决方案，但设计不那么死板，因为您不必设置任何高度。

flex-grow: 1; 告诉 p 填充容器元素的剩余空间，从而将了解更多链接推送到.card 元素的底部。

下面是一个演示，演示如何简化标记并使其更具语义(不要将 h2 用于阅读更多链接)。

.row {
  display: flex;
}
.card {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 33.33333%;
  padding: 1.5rem;
  text-align: center;
  font-family: "Droid Sans", Arial, sans-serif;
  background-color: steelblue;
}

.card img {
  max-width: 100%;
  height: auto;
  display: block;
}

.card p {
  flex-grow: 1;
}

<div class="row">
  <div class="card">
    <img src="https://placehold.it/300x300/fff">
    <h3>Title</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat nihil accusamus numquam praesentium ipsum aspernatur deserunt.
    </p>
    <a href="#">Learn More</a>
  </div>

  <div class="card">
    <img src="https://placehold.it/300x300/fff">
    <h3>Title</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
    <a href="#">Learn More</a>
  </div>

  <div class="card">
    <img src="https://placehold.it/300x300/fff">
    <h3>Title</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat nihil accusamus numquam praesentium ipsum aspernatur deserunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat nihil accusamus numquam praesentium ipsum aspernatur deserunt.
    </p>
    <a href="#">Learn More</a>
  </div>
</div>