将锚标签对齐到 2 div 的底部，没有绝对位置

Question

所以我一直在做一个网站，现在我有一些显示功能的订阅卡。现在我希望卡片始终具有相同的大小，因此我使用了 display table 和 table-cell，以便较小的卡片始终与另一张卡片的高度相匹配。但是两张卡片都有一个按钮（我使用锚标记作为按钮）并且我希望它们始终位于 div 的底部。但出于某种原因，我无法让它工作。我不想使用绝对位置，所以我想知道还有其他方法可以做到吗？

正如您在这张图片中看到的，我希望 'Free' 的按钮与 'Pro' 的按钮高度相同

HTML

<section class="pricing-row">
                <article class="pricing-card">
                    <h3>Free</h3>
                    <h1 class="pricing-value">[=11=].00<span class="pricing-length">/mo</span></h1>
                    <ul>
                        <li>Feature</li>
                        <li>Feature</li>
                        <li>Feature</li>
                    </ul>
                    <a href="#">Get started</a>
                </article>
                <article class="pricing-card">
                    <h3>Pro</h3>
                    <h1 class="pricing-value">.99<span class="pricing-length">/mo</span></h1>
                    <ul>
                        <li>Feature</li>
                        <li>Feature</li>
                        <li>Feature</li>
                        <li>Feature</li>
                        <li>Feature</li>
                        <li>Feature</li>
                        <li>Feature</li>
                        <li>Feature</li>
                    </ul>
                    <a href="#">Get started</a>
                </article>
            </section>

CSS

.pricing-row {
  display: table;
  width: 100%;
  border-spacing: 50px;
}

.pricing-card {
  position: relative;
  display: table-cell;
  border: 1px solid #515151;
  min-height: 100px;
  border-radius: 10px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  text-align: center;
}

.pricing-card > h3 {
  width: 100%;
  font-size: 1.5rem;
  font-weight: 500;
  background-color: #000;
  color: #fff;
  padding: 15px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.pricing-card > ul {
  list-style: none;
  color: #6c757d;
}

.pricing-card > ul li {
  margin: 5px 0px;
}

.pricing-card > a {
  display: inline-block;
  text-decoration: none;
  color: #ff7700;
  border-radius: 5px;
  border: 1px solid #ff7700;
  width: 97.5%;
  padding: 10px;
  margin: 10px 0px;
}

.pricing-card > a:hover {
  transition: 0.3s;
  color: #fff;
  background-color: #ff7700;
}

.pricing-value {
  color: #4e575f;
  font-size: 2.5rem;
  font-weight: 500;
  margin: 20px 0px;
}

.pricing-length {
  color: #6c757d;
  font-size: 2rem;
}

提前致谢

Answer 1

实现此目的的最佳方法是使用 display: flex;（在容器上）和 margin-top: auto;（在 <a> 上）。

此外，不要将 display: table-*; 用于 <table> 以外的任何内容。 CSS 有 display: grid; 因为这个确切的原因效果更好。

.pricing-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 50px;
  width: 100%;
}

* {
  box-sizing: border-box;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid #515151;
  min-height: 100px;
  border-radius: 10px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  text-align: center;
}

.pricing-card > h3 {
  width: 100%;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 500;
  background-color: #000;
  color: #fff;
  padding: 15px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.pricing-card > ul {
  list-style: none;
  color: #6c757d;
  padding: 0;
}

.pricing-card > ul li {
  margin: 5px 0px;
  padding: 0;
}

.pricing-card > a {
  display: inline-block;
  text-decoration: none;
  color: #ff7700;
  border-radius: 5px;
  border: 1px solid #ff7700;
  width: 97.5%;
  padding: 10px;
  margin: 10px 0px;
  align-self: center;
  margin-top: auto;
}

.pricing-card > a:hover {
  transition: 0.3s;
  color: #fff;
  background-color: #ff7700;
}

.pricing-value {
  color: #4e575f;
  font-size: 2.5rem;
  font-weight: 500;
  margin: 20px 0px;
}

.pricing-length {
  color: #6c757d;
  font-size: 2rem;
}

<section class="pricing-row">
    <article class="pricing-card">
        <h3>Free</h3>
        <h1 class="pricing-value">[=11=].00<span class="pricing-length">/mo</span></h1>
        <ul>
            <li>Feature</li>
            <li>Feature</li>
            <li>Feature</li>
        </ul>
        <a href="#">Get started</a>
    </article>
    <article class="pricing-card">
        <h3>Pro</h3>
        <h1 class="pricing-value">.99<span class="pricing-length">/mo</span></h1>
        <ul>
            <li>Feature</li>
            <li>Feature</li>
            <li>Feature</li>
            <li>Feature</li>
            <li>Feature</li>
            <li>Feature</li>
            <li>Feature</li>
            <li>Feature</li>
        </ul>
        <a href="#">Get started</a>
    </article>
</section>

将锚标签对齐到 2 div 的底部，没有绝对位置

Align anchor tag to bottom of 2 div's without position absolute

html

css

css-position

display