Абсолютное позиционирование нарушается, когда другие гибкие элементы в одном ряду имеют разную высоту

Question

Абсолютное позиционирование нарушается, когда другой гибкий элемент в том же ряду имеет переменную высоту.

Кнопка «Читать далее» должна располагаться как на первой карте (под названием «Небо»Высокий 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>

Answer 1

Это может быть решение, которое вы ищете: https://codepen.io/mgrace/pen/RmGeqm.

, а именно: article { position: relative; } вместо

footer { position: relative; }

и вместо него footer является абсолютно позицией по отношению к article, а кнопка абсолютно не позиционируется по отношению к footer. Так как в существующем коде на высоту нижнего колонтитула влияет длина текста в теле статьи и абсолютное позиционирование кнопки относительно нижнего колонтитула. Вместо этого это изменение устанавливает позицию нижнего колонтитула на основе контейнера статьи, таким образом гарантируя, что он всегда будет установлен в этом нижнем правом углу.

Answer 2

Просто установите article положение относительно нижнего колонтитула

Перерыв вызван тем фактом, что ваш нижний колонтитул всегда находится сразу за вашим контентом, но когда в каком-то блоке есть больше контента, их нижний колонтитул находится ниже в своем боксе, поэтому, когда вы позиционируете свою кнопку на основе нижнего колонтитула, он не будет работать , Сгибаемый элемент (статья) растягивается, но содержимое внутри просто складывается, как обычно, поэтому нижний колонтитул не находится внизу поля. Делая статью (гибкий элемент) относительной, вы гарантируете, что высота блоков будет одинаковой, поскольку она растянута по умолчанию, и ваша кнопка всегда будет отображаться в одном и том же месте.

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>

Вы можете запустить коэффициент выше, затем нажать кнопку полного экрана, чтобы увидеть фактический результат, который вы ищете, так как он сложен в представлении по умолчанию