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.
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>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ę
Podobne pytania
Nowe pytania
html
HTML (HyperText Markup Language) to język znaczników służący do tworzenia stron internetowych i innych informacji wyświetlanych w przeglądarce internetowej. Pytania dotyczące HTML powinny zawierać minimalny możliwy do odtworzenia przykład i pewne wyobrażenie o tym, co próbujesz osiągnąć. Ten tag jest rzadko używany samodzielnie i często jest łączony z [CSS] i [javascript].
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.)calc(100vh - 10px), ponieważ 100% może oznaczać wszystko, naprawdę.