Frage Positionierung innerhalb eines Flexgrid Members

NetAktiv · Heute um 17:52

Ich habe in einem Flexgrid mehrere Div, die unterschiedlich lange Texte und einen Link als letztes Element beinhalten. Die Boxen in einer Row sind trotz unterschiedlicher Textlänge alle gleich hoch und ich möchte den Link am unteren Rand des Div haben. Ich habe schon diverse Versuche mit position und bottom hinter mir, leider klappt es bisher nicht.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset='utf-8'>
<style>
.rr-menuDiv { display:flex; flex-flow: wrap; flex-direction: row; justify-content: space-evenly; }
.rr-menuItem { background-color: #336290; border-radius: 10px; margin: 10px; padding: 10px; max-width: 200px; flex-shrink: 2; }
.rr-menuItem img { border-radius: 10px; height: auto; width: 100%; }
.rr-menuItem p { color: white; }
.rr-menuItem a { color: #BAF8FF; }
.rr-menuAnchor { text-align:center; position: relative; bottom: 0; }
.rr-menuAnchor a { color: #000000; border-radius: 10px; background-color: #ffffff; width: 100px; display: inline-block; text-align:center; }
</style>
</head>
<body>
<div class="rr-menuDiv">
<div class="rr-menuItem">
<img src="test.webp" alt="Test" title="Test">
<p>
Text 1 kurz
</p>
<div class="rr-menuAnchor"><a href="#" title="Test">Weiter</a></div>
</div>

<div class="rr-menuItem">
<img src="test.webp" alt="Test" title="Test">
<p>
Text 2 mittel Text 2 mittel Text 2 mittel Text 2 mittel Text 2 mittel Text 2 mittel
Text 2 mittel Text 2 mittel Text 2 mittel Text 2 mittel Text 2 mittel Text 2 mittel
</p>
<div class="rr-menuAnchor"><a href="#" title="Test">Weiter</a></div>
</div>

<div class="rr-menuItem">
<img src="test.webp" alt="Test" title="Test">
<p>
Text 3 lang Text 3 lang Text 3 lang Text 3 lang Text 3 lang Text 3 lang Text 3 lang
Text 3 lang Text 3 lang Text 3 lang Text 3 lang Text 3 lang Text 3 lang Text 3 lang
Text 3 lang Text 3 lang Text 3 lang Text 3 lang Text 3 lang Text 3 lang Text 3 lang
Text 3 lang Text 3 lang Text 3 lang Text 3 lang Text 3 lang Text 3 lang Text 3 lang
Text 3 lang Text 3 lang Text 3 lang Text 3 lang Text 3 lang Text 3 lang Text 3 lang
</p>
<div class="rr-menuAnchor"><a href="#" title="Test">Weiter</a></div>
</div>

<div class="rr-menuItem">
<img src="test.webp" alt="Test" title="Test">
<p>
Text 4 kurz
</p>
<div class="rr-menuAnchor"><a href="#" title="Test">Weiter</a></div>
</div>
</div>
</body>
</html>

Oliver77 · Heute um 18:28

Hallo ich habs mal auf absolute gesetzt, mit Padding vom Parent:

CSS:

.rr-menuItem {
    background-color: #336290;
    border-radius: 10px;
    margin: 10px;
    padding: 10px;
    max-width: 200px;
    flex-shrink: 2;
    position: relative;
    padding-bottom: 30px;
}
.rr-menuAnchor {
    text-align: center;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

NetAktiv · Heute um 20:32

Hallo Oliver,
eigentlich hatte ich das auch probiert, aber ohne Erfolg, weil ich beim Parent-Element nichts gemacht habe, und ich wäre wohl auch nie auf die Idee gekommen. Ohne diese zusätzliche Änderung geht es aber auch nicht wie gewünscht. Und dass dann das center nicht mehr funktioniert und man auf diese mir bisher unbekannte translateX zugreifen muss, ist der nächste Hammer. Auf jeden Fall muss man wohl eine Menge Erfahrung haben, um das so schnell zu finden. Vielen Dank.

Frage Positionierung innerhalb eines Flexgrid Members

NetAktiv

Senior HTML'ler

Anhänge

Oliver77

Aktives Mitglied

NetAktiv

Senior HTML'ler

Neueste Beiträge