div中最底部的段[重复项]

Question

此问题已经在这里有了答案：

How can I position my div at the bottom of its container?（23个答案）

关闭29分钟前。

如何将div中的一个段落放在最底端？

我正在尝试相对位置（在div上），绝对位置（在p上）组合，但是它不起作用。我希望“阅读更多”文本位于div的最底部，因为这些div彼此相邻并且它们的文本长度非常大。

HTML：

<div class="card-body">
 <h3><a href="project2.html">Joia</a></h3>
  <p>Concept design for an eCommerce solution for a local art store (exercise).</p>
  <p class="read-more"><a href="project2.html">Read More</a></p>
</div>

CSS：

 .card-body {
        position: relative;
    }

    .read-more {
        position: absolute;
        bottom: 0;
        left: 0;
    }

Answer 1

Flexbox可以做到这一点无定位：

* {
  margin: 0;
  padding: 0
}

.card-body {
  display: flex;
  flex-direction: column;
  height: 150px;
  border: 1px solid grey;
}

.read-more {
  margin-top: auto;
}

<div class="card-body">
  <h3><a href="project2.html">Joia</a></h3>
  <p>Concept design for an eCommerce solution for a local art store (exercise).</p>
  <p class="read-more"><a href="project2.html">Read More</a></p>
</div>

Answer 2

<div class="card-body">
 <h3><a href="project2.html">Joia</a></h3>
  <p>Concept design for an eCommerce solution for a local art store (exercise).</p>
  <span class="read-more"><a href="project2.html">Read More</a></span>
</div>

使用span而不是p标签将起作用，因为将为p标签设置默认边距在Chrome浏览器（webkit）中，p标签的margin-top（元素上方）和margin-bottom（元素下方）为1em。