In meinen Unterlagen steht ein Beispiel für eine Positionierung.
Es gibt eine Liste (ul/li):
In dem umgebenden Div gibt es einen Leerraum, der zwischen Menüpunkt3 und Menüpunkt4 positioniert werden soll. Um die Menüpunkte vlnr und den Leerraum zwischen MP3 und MP4 zu positionieren, ist das CSS folgendermaßen angegeben:
Hiernach sollte sich Menüpunkt4 ganz rechts platzieren und die Menüpunkte 1-3 nach links schieben (vlnr):
Menüpunkt1 - Menüpunkt2 - Menüpunkt3 - LEERRAUM - Menüpunkt4.
Hierzu meine Frage - was mache ich, wenn ich aber unterschiedliche Elemente im umgebenden Div habe und die anordnen möchte?
BSP:
ich habe einen DIV (article class="beispielbox") und in dem gibt es 3 Elemente, die ich in der Höhe positionieren möchte:
1x Überschift (h1)
1x Text (p)
1x Bild (img in div.bild)
Wie muss ich jetzt vorgehen? Ich kann ja sicher(?) nur Elemente der gleichen Art wie oben geschrieben ansprechen, oder?
Meine Idee: ich packe die Überschrift und den Text jeweils in ein Div und spreche die 3 Divs dann wie folgt an:
Damit mache ich den umgebenden Div "article" zu einer Flexbox, Überschrift und p-Tag werden vom ganz unten positionierten div.bild nach oben geschoben.
Erkennt jemand meinen Denkfehler? Das funktioniert so nicht... Das Bild beibt nicht komplett unten.
Der Vollständigkeit wegen: die Box steht neben einer zweiten (genau gleich aufgebauten) Box - diese beiden Boxen sind Bestandteil einer Flexbox. Ich habe also Flexboxen verschachtelt.
Die zweite Box enthält aber eine Zeile mehr Text und diese Box ist komplett gefüllt - hier ist das Bild korrekt am unteren Rand positioniert.
Grundsätzlich möchte ich gern in allen Boxen oben eine Überschrift, darunter den Text, dann den Leerraum (der je nach Textmenge der Box variieren kann) und darunter das Bild, dass am unteren Rand der Box positioniert sein soll.
Aktuell ist es bei beiden Boxen so: die Überschriften stehen bei beiden Boxen auf einer Höhe, die Texte stehen ebenfalls auf einer Höhe. Bei der zweiten Box schließt sich dann das Bild an - bei der ersten Box ist das auch so aber durch den etwas kleiner ausfallenden Text und das Bild, das sich direkt anschließt, habe ich unten in der Box einen Leerraum.
Kann mir dazu jemand verbindliche Infos/Antworten/Hinweise geben?
Vielen Dank vorab!! :-)
Es gibt eine Liste (ul/li):
HTML:
<ul>
<li> menüpunkt1</li>
<li> menüpunkt2</li>
<li> menüpunkt3</li>
<li> menüpunkt4</li>
</ul>
In dem umgebenden Div gibt es einen Leerraum, der zwischen Menüpunkt3 und Menüpunkt4 positioniert werden soll. Um die Menüpunkte vlnr und den Leerraum zwischen MP3 und MP4 zu positionieren, ist das CSS folgendermaßen angegeben:
Code:
ul {display:flex;}
li:last-of-type {margin-left: auto;}
Hiernach sollte sich Menüpunkt4 ganz rechts platzieren und die Menüpunkte 1-3 nach links schieben (vlnr):
Menüpunkt1 - Menüpunkt2 - Menüpunkt3 - LEERRAUM - Menüpunkt4.
Hierzu meine Frage - was mache ich, wenn ich aber unterschiedliche Elemente im umgebenden Div habe und die anordnen möchte?
BSP:
ich habe einen DIV (article class="beispielbox") und in dem gibt es 3 Elemente, die ich in der Höhe positionieren möchte:
1x Überschift (h1)
1x Text (p)
1x Bild (img in div.bild)
Wie muss ich jetzt vorgehen? Ich kann ja sicher(?) nur Elemente der gleichen Art wie oben geschrieben ansprechen, oder?
Meine Idee: ich packe die Überschrift und den Text jeweils in ein Div und spreche die 3 Divs dann wie folgt an:
Code:
article.beispielbox {display:flex;}
div:last-of-type {margin-top: auto;}
Damit mache ich den umgebenden Div "article" zu einer Flexbox, Überschrift und p-Tag werden vom ganz unten positionierten div.bild nach oben geschoben.
Erkennt jemand meinen Denkfehler? Das funktioniert so nicht... Das Bild beibt nicht komplett unten.
Der Vollständigkeit wegen: die Box steht neben einer zweiten (genau gleich aufgebauten) Box - diese beiden Boxen sind Bestandteil einer Flexbox. Ich habe also Flexboxen verschachtelt.
Die zweite Box enthält aber eine Zeile mehr Text und diese Box ist komplett gefüllt - hier ist das Bild korrekt am unteren Rand positioniert.
Grundsätzlich möchte ich gern in allen Boxen oben eine Überschrift, darunter den Text, dann den Leerraum (der je nach Textmenge der Box variieren kann) und darunter das Bild, dass am unteren Rand der Box positioniert sein soll.
Aktuell ist es bei beiden Boxen so: die Überschriften stehen bei beiden Boxen auf einer Höhe, die Texte stehen ebenfalls auf einer Höhe. Bei der zweiten Box schließt sich dann das Bild an - bei der ersten Box ist das auch so aber durch den etwas kleiner ausfallenden Text und das Bild, das sich direkt anschließt, habe ich unten in der Box einen Leerraum.
Kann mir dazu jemand verbindliche Infos/Antworten/Hinweise geben?
Vielen Dank vorab!! :-)