当同一行上的其他弹性项目具有不同的高度时，绝对定位会中断

时间：2019-05-13 16:31:59

标签： html css css3 flexbox

当同一行上的另一个伸缩项目的高度发生变化时，绝对定位就会中断。

Here's a picture of the issue

阅读更多按钮的位置应与第一张卡（标题为“ Sky High WiFi”）上的位置相同。由于第二张卡片上的文章描述较短，因此导致“阅读更多”按钮向上移动。

在下面的代码中，当同一行上的两个子项的高度不同时，如何防止绝对定位“破坏”？

  a {
  text-decoration: none;
  color: #ff8a64;
}

.author-name {
  display: inline;
}

.author-name-date-padding {
  padding: 0 .4rem;
}

.container {
  max-width: 1140px;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-right: auto;
  margin-left: auto;
  font-family: montserrat;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}

article {
  box-shadow: 0 0 0.6rem 0.25rem rgba(0, 0, 0, .1);
  border-radius: 2px;
  margin: 2rem 0;
  width: 100%;
}

.post-meta-and-title {
  padding: 2rem 1.5rem 0;
}

.post-meta {
  font-size: .7rem;
}

.post-title {
  font-size: 1.25rem;
  font-weight: 400;
  color: black;
  font-family: 'Source Sans Pro', sans-serif;
}

.post-description {
  padding: 0 1.5rem;
}

footer {
  position: relative;
  padding: 0 1.5rem 2rem;
}

.btn {
  background-image: linear-gradient(150deg, #ffb064 -1%, #ff6496 101%);
  position: absolute;
  right: -1rem;
  bottom: -1rem;
  padding: .5rem 2rem;
  line-height: 1.5;
  color: white;
  font-size: .9rem;
}


/* RESPONSIVE STYLES */

@media (min-width: 810px) {
  .container {
    justify-content: space-between;
  }
  article {
    width: calc(50% - 4rem);
  }
  @media (min-width: 1200px) {
    article {
      width: calc(33.3% - 4rem);
    }
  }
<section class="container">
  <article>
    <header class="post-meta-and-title">
      <div class="post-meta">
        <time datetime="2019-05-09 20:00">May 9, 2019</time>
        <p class="author-name"><span class="author-name-date-padding">|</span>
          <a href="https://carney.co/author/adamkunes/" rel="author">Craig Kleila</a>
        </p>
      </div>
      <h2><a class="post-title" href="#">Sky High WiFi</a></h2>
    </header>

    <p class="post-description">plus – better landing pages, heatmaps, and Starbucks.</p>

    <footer>
      <a href="#" class="btn">READ MORE</a>
    </footer>
  </article>

  <article>
    <header class="post-meta-and-title">
      <div class="post-meta">
        <time datetime="2019-05-05 12:00">May 5, 2019</time>
        <p class="author-name"><span class="author-name-date-padding">|</span>
          <a href="https://carney.co/author/adamkunes/" rel="author">Mallorie Beckner</a>
        </p>
      </div>
      <h2><a class="post-title" href="#">Are you afraid of clowns?</a></h2>
    </header>

    <p class="post-description">plus – tech overload, productivity, and Tom Brady.</p>

    <footer>
      <a href="#" class="btn">READ MORE</a>
    </footer>
  </article>

  <article>
    <header class="post-meta-and-title">
      <div class="post-meta">
        <time datetime="2019-05-01 18:00">May 1, 2019</time>
        <p class="author-name"><span class="author-name-date-padding">|</span>
          <a href="https://carney.co/author/adamkunes/" rel="author">Nick Ferrentino</a>
        </p>
      </div>
      <h2><a class="post-title" href="#">It's time to get real folks</a></h2>
    </header>

    <p class="post-description">plus – sell more event tickets, and faster feedback.</p>

    <footer>
      <a href="#" class="btn">READ MORE</a>
    </footer>
</section>

2 个答案:

答案 0 :(得分：1)

只需使article相对位置而不是页脚

该中断是由于您的页脚始终位于内容之后，但当某些框具有更多内容时，其页脚在框中较低，因此，当您基于页脚定位按钮时，它将不起作用。 flex项目（文章）可以拉伸，但是内部的内容却像正常情况一样堆叠，因此页脚不在框的底部。通过使article（flex item）相对，可以确保盒子的高度相同，因为默认情况下它是拉伸的，并且您的按钮将始终出现在同一位置。

a {
  text-decoration: none;
  color: #ff8a64;
}

.author-name {
  display: inline;
}

.author-name-date-padding {
  padding: 0 .4rem;
}

.container {
  max-width: 1140px;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-right: auto;
  margin-left: auto;
  font-family: montserrat;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}

article {
  box-shadow: 0 0 0.6rem 0.25rem rgba(0, 0, 0, .1);
  border-radius: 2px;
  margin: 2rem 0;
  width: 100%;
  position: relative;
}

.post-meta-and-title {
  padding: 2rem 1.5rem 0;
}

.post-meta {
  font-size: .7rem;
}

.post-title {
  font-size: 1.25rem;
  font-weight: 400;
  color: black;
  font-family: 'Source Sans Pro', sans-serif;
}

.post-description {
  padding: 0 1.5rem;
}

footer {
  padding: 0 1.5rem 2rem;
}

.btn {
  background-image: linear-gradient(150deg, #ffb064 -1%, #ff6496 101%);
  position: absolute;
  right: -1rem;
  bottom: -1rem;
  padding: .5rem 2rem;
  line-height: 1.5;
  color: white;
  font-size: .9rem;
}


/* RESPONSIVE STYLES */

@media (min-width: 810px) {
  .container {
    justify-content: space-between;
  }
  article {
    width: calc(50% - 4rem);
  }
  @media (min-width: 1200px) {
    article {
      width: calc(33.3% - 4rem);
    }
  }
<section class="container">
  <article>
    <header class="post-meta-and-title">
      <div class="post-meta">
        <time datetime="2019-05-09 20:00">May 9, 2019</time>
        <p class="author-name"><span class="author-name-date-padding">|</span>
          <a href="https://carney.co/author/adamkunes/" rel="author">Craig Kleila</a>
        </p>
      </div>
      <h2><a class="post-title" href="#">Sky High WiFi</a></h2>
    </header>

    <p class="post-description">plus – better landing pages, heatmaps, and Starbucks.</p>

    <footer>
      <a href="#" class="btn">READ MORE</a>
    </footer>
  </article>

  <article>
    <header class="post-meta-and-title">
      <div class="post-meta">
        <time datetime="2019-05-05 12:00">May 5, 2019</time>
        <p class="author-name"><span class="author-name-date-padding">|</span>
          <a href="https://carney.co/author/adamkunes/" rel="author">Mallorie Beckner</a>
        </p>
      </div>
      <h2><a class="post-title" href="#">Are you afraid of clowns?</a></h2>
    </header>

    <p class="post-description">plus – tech overload, productivity, and Tom Brady.</p>

    <footer>
      <a href="#" class="btn">READ MORE</a>
    </footer>
  </article>

  <article>
    <header class="post-meta-and-title">
      <div class="post-meta">
        <time datetime="2019-05-01 18:00">May 1, 2019</time>
        <p class="author-name"><span class="author-name-date-padding">|</span>
          <a href="https://carney.co/author/adamkunes/" rel="author">Nick Ferrentino</a>
        </p>
      </div>
      <h2><a class="post-title" href="#">It's time to get real folks</a></h2>
    </header>

    <p class="post-description">plus – dsf dsfdsafa sdf adsf asdf asdf sdafa sf dsaf sdf dsaf dsaf asfd dsf sdf dfsell more event tickets, and faster feedback.</p>

    <footer>
      <a href="#" class="btn">READ MORE</a>
    </footer>
  </article>
</section>

您可以运行上面的coe，然后按全屏按钮查看所需的实际结果，因为它已堆叠在默认视图中

答案 1 :(得分：1)

这可能是您正在寻找的解决方案：https://codepen.io/mgrace/pen/RmGeqm。

即： article { position: relative; }代替

footer { position: relative; }

，相反，footer相对于article处于绝对位置，而不是按钮相对于footer处于绝对位置。由于在您现有的代码中，页脚的高度受到文章正文中文本长度的影响，并且按钮相对于页脚的位置绝对正确。相反，此更改将根据文章容器设置页脚的位置，从而确保始终将其设置为该右下角。

相关问题
最新问题