将锚标记对齐到 2 个 div 的底部，没有绝对位置 [重复]

Posted 2023-03-06

【中文标题】将锚标记对齐到 2 个 div 的底部，没有绝对位置 [重复]

【英文标题】：Align anchor tag to bottom of 2 div's without position absolute [duplicate]

【发布时间】：2020-05-18 01:46:07

【问题描述】：

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

正如您在这张图片中看到的，我希望“免费”按钮与“专业”按钮的高度相同

HTML

<section class="pricing-row">
                <article class="pricing-card">
                    <h3>Free</h3>
                    <h1 class="pricing-value">$0.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">$4.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;

提前致谢

【问题讨论】：

来自副本：***.com/a/27812717/8620333

【参考方案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">$0.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">$4.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>

【讨论】：

正是我需要的。谢谢你从来没有想过使用 margin-top: auto （说实话从来没有真正用过）谢谢