Div-Element am unteren Rand des Containers ausrichten [duplizieren]
Diese Frage hat hier bereits eine Antwort:
Ein Element mit der Flexbox nach unten ausrichten 5 AntwortenIch versuche, eine von drei Divs in einem Container nach unten auszurichten, aber ich habe einige Probleme.
Wie Sie sehen werden, wenn ich versuche, die absolute Positionierung auf dem @ zu verwendbottom-aligned
Div die Höhe wird ein Problem.
Ich kann eine bestimmte Höhe festlegen, aber der Inhalt innerhalb descta-item
divs können von sehr klein bis sehr groß variieren.
Ich versuche, eine Lösung für alle Anwendungsfälle zu erstellen.
Ich weiß, ich kann jQuery verwenden, um die Höhe des größten @ zu erhaltcta-item
div und passen Sie es entsprechend an, aber ich versuche, jQuery / JS zu vermeiden, wenn immer dies möglich ist.
Ich habe eine Geige erstelltHie mit dem was ich aktuell habe.
Danke im Voraus
.dynamic-cta-ctr {
display: flex;
}
.dynamic-cta-ctr .cta-item {
flex: 1;
text-align: center;
padding: 0 30px;
position: relative;
border-right: 1px solid #555;
}
.dynamic-cta-ctr .cta-item:last-child {
border-right: none;
}
.dynamic-cta-ctr .cta-item .bottom-aligned {
/* position: absolute;
bottom: 0; */
}
<div class="dynamic-cta-ctr">
<div class="cta-item">
<div class="heading-text"><h3>Some content</h3></div>
<div class="cta-field-content">Some content that sort of hangs around</div>
<div class="bottom-aligned"><h5>Bottom aligned content</h5></div>
</div>
<div class="cta-item">
<div class="heading-text"><h3>You can have your cake and eat it too!</h3></div>
<div class="cta-field-content">Some content that sort of hangs around</div>
<div class="bottom-aligned"><h5>Bottom aligned content</h5></div>
</div>
<div class="cta-item">
<div class="heading-text"><h3>More people will come if you say we have punch and pie</h3></div>
<div class="cta-field-content">Some content that sort of hangs around</div>
<div class="bottom-aligned"><h5>Bottom aligned content</h5></div>
</div>
</div>