Noch nicht viel geschrieben
Guten Abend zusammen,
ich hoffe ihr könnt mir diese Frage beantworten. Ich denke es ist simple, doch ich komme auf keinen Lösungsansatz. Ich habe 3 Artikel-Elemente, welche wiederum zwei Span-Elemente und den Paragraph enthalten:
Die Artikel Elemente habe ich nebeneinander mit der Display Eigenschaft Flex angeordnet. Das Problem sind dann aber die unteren Span Elemente eines jeden Artikel Elements:
Mein Problem ist wie ich das untere Span Element jeweils auf einer Höhe positioniere, obwohl die Artikel-Elemente unterschiedlich hoch sind. Man könnte natürlich eine Höhe für das p-Element definieren, doch ist das sicher nicht die gängigste Art und bei flexiblen Inhalten auch nicht ratsam, oder?
ich hoffe ihr könnt mir diese Frage beantworten. Ich denke es ist simple, doch ich komme auf keinen Lösungsansatz. Ich habe 3 Artikel-Elemente, welche wiederum zwei Span-Elemente und den Paragraph enthalten:
HTML:
<section id="work-wrapper">
<article>
<span>Überschrift>/span>
<p>Artikelinhalt</p>
<span class="button">Button</span>
</article>
<article>
<span>Überschrift>/span>
<p>Artikelinhalt</p>
<span class="button">Button</span>
</article>
<article>
<span>Überschrift>/span>
<p>Artikelinhalt</p>
<span class="button">Button</span>
</article>
</section>
CSS:
#work-wrapper {display: flex;}
#work-wrapper article {box-sizing: border-box; padding: 0 2.083333333333333%;}
article > span {font-size: 1.2rem; font-weight: 700; text-transform: uppercase;}
article > p {text-align: justify; font-size: 1.0rem; line-height: 1.5em;}
.button {justify-content: flex-end; text-align: center; font-size: 1.2rem; font-weight: 700; text-transform: uppercase;}
Die Artikel Elemente habe ich nebeneinander mit der Display Eigenschaft Flex angeordnet. Das Problem sind dann aber die unteren Span Elemente eines jeden Artikel Elements:
Mein Problem ist wie ich das untere Span Element jeweils auf einer Höhe positioniere, obwohl die Artikel-Elemente unterschiedlich hoch sind. Man könnte natürlich eine Höhe für das p-Element definieren, doch ist das sicher nicht die gängigste Art und bei flexiblen Inhalten auch nicht ratsam, oder?
Zuletzt bearbeitet: