Mam układ trzech kolumn, który umieszcza wezwania do działania na dole przy użyciu pozycjonowania bezwzględnego i wysokości 100% w kontenerze:

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

Ale chcę, aby pierwsze zdanie w akapicie było równe z pozostałymi, nawet jeśli reszta wylewa się poza pojemnik:

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

Udało mi się to osiągnąć, używając top: 300px zamiast bottom: 10px w wezwaniach do działania, ale nie jest to idealne rozwiązanie, ponieważ nie można zmienić liczby znaków w kopii bez dostosowania wartości top: 300px. Każda pomoc jest mile widziana.

0
user2733112 20 listopad 2019, 23:16
2
Ustawić je od top, ale zamiast tego użyć calc(100% - 10px)? (Lub niezależnie od tego, ile chcesz, aby element był wyświetlany zamiast 10 pikseli; może nawet użyj bardziej odpowiedniej jednostki dla drugiej wartości, takiej jak em, aby zmniejszyć problemy z względnymi rozmiarami czcionek.)
 – 
04FS
20 listopad 2019, 23:25
Zamiast tego użyłbym calc(100vh - 10px), ponieważ 100% może oznaczać wszystko, naprawdę.
 – 
Rickard Elimää
21 listopad 2019, 13:57

2 odpowiedzi

Możesz sobie z tym poradzić, całkowicie wypychając wezwanie do działania z karty, a następnie używając wartości transformacji równej wysokości linii, aby ją z powrotem wyciągnąć.

.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>
0
Paulie_D 21 listopad 2019, 13:53

Pomysł Paulie_D może również zadziałać, ale rozwiązanie 04FS polegające na użyciu top:calc (100% - 10px) zamiast bottom zadziałało jak urok! Dziękuję

0
user2733112 25 listopad 2019, 17:50