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

固定宽度和高度会影响响应能力。尝试用填充或边距规则替换它。您还可以设置min（max）-height，min（max）-width。并确保使用视口;）

Answer 2

绝对定位将元素从当前文档流中取出（不占用空间）并相对于最近定位的祖先定位。如果没有定位的祖先元素，则元素将相对于视口（浏览器窗口）定位。这就是您的按钮以不同视口大小覆盖文本的原因。

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

顶部按钮位于底部，您需要确保每个组件仅占用一定量的空间，即在p等某些子组件上设置高度。虽然我自己会选择flexbox解决方案，但设计不那么严格，因为你不需要设置任何高度。

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

下面是一个演示文稿，说明如何简化标记并使其更具语义性（不要将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>

屏幕宽度更改时如何阻止两个内部div重叠

2 个答案: