html - 绝对定位到 div 底部的文本需要向下而不是向上增长/扩展

Question

我有一个三列布局，使用绝对定位将号召性用语定位在底部，容器的高度为 100%:

-----------------------------    -----------------------------     -----------------------------  
| Col 1                     |    | Col 2                     |     | Col 3                     |
|                           |    |                           |     |                           |
| Copy                      |    | Copy                      |     | Copy                      |
|                           |    |                           |     |                           |
|                           |    |                           |     | Call to action 3 is       |
| Call to action 1          |    | Call to action 2          |     | Longer text               |
-----------------------------    -----------------------------     -----------------------------  

但我想要的是段落中的第一句话与其他句子保持一致，即使其余部分溢出到容器之外:

-----------------------------    -----------------------------     -----------------------------  
| Col 1                     |    | Col 2                     |     | Col 3                     |
|                           |    |                           |     |                           |
| Copy                      |    | Copy                      |     | Copy                      |
|                           |    |                           |     |                           |
|                           |    |                           |     |                           |
| Call to action 1          |    | Call to action 2          |     | Call to action 3 is       |
-----------------------------    -----------------------------     -----------------------------  
                                                                     Longer text

我能够通过在 CTA 上使用 top:300px 而不是 bottom:10px 来实现这一点，但这并不理想，因为如果不调整 top:300px 值，就无法更改副本中的字符数。感谢您的帮助。

Answer 1

您可以通过将 CTA 完全推出卡片然后使用等于您的行高的转换值将其拉回来来管理此问题。

.container {
  display: flex;
}

.card {
  flex: 1;
  padding: 1em;
  padding-bottom: 2.2em;
  border: 1px solid green;
  margin: 1em;
  position: relative;
}

.cta {
  position: absolute;
  top: 100%;
  border: 1px solid red;
  padding: 0 1em;
  left: 0;
  right: 0;
  transform: translateY(-1.2em);
  /* line-height */
}

<div class="container">
  <div class="card">
    <h2>Heading 1</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, voluptatem.</p>
    <div class="cta">CTA</div>
  </div>
  <div class="card">
    <h2>Heading 2</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate repellendus in magni?</p>
    <div class="cta">CTA Lorem ipsum dolor sit amet</div>
  </div>
  <div class="card">
    <h2>Heading 3</h2>
    <p>Lorem ipsum dolor sit amet.</p>
    <div class="cta">CTA Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
  </div>
</div>