Zeilenumbruch verhindern

[Melvin Cowznofski]

Hallo Klaus!

wie kann ich erreichen, dass ein Text und ein Bild nicht (in unterschiedliche Zeilen) getrennt werden, wenn die Seite verkleinert wird?

Ich nehme an, bei den Bildern handelt es sich um Flaggen. Mit html5 und CSS3 wäre es _eine_ elegante Lösung, mit <figure> zu arbeiten und die Sprache als <figcaption> dem Bild zuzuordnen. Nun sind Bild und Text schon mal untrennbar verbunden.

Allerdings sind die beiden <figure> Elemente zunächst noch untereinander angeordnet und wir wollen sie ja nebeneinender haben. Deshalb wird das Elternelement, in dem sie sich befinden, zur Flexbox gemacht.

Nun sind beide Bilder mit darunterliegendem Text nebeneinander. Da es aber zu einem Umbruch kommen soll, wenn sich die Viewportbreite verkleinert, kommt jetzt noch ein "Responsiv Webdesign" dazu, im dem wir per CSS festlegen, dass sich die beiden <figure> Elemente unter einer bestimmten Viewportbreite untereinander anordenen sollen.

Damit Du das besser nachvollziehen kannst, habe ich eine entsprechende Beispielseite samt CSS geschreiben. Schau Dir bei beiden den Quelltext an, um besser zu verstehen, was ich gerade geschrieben habe.

In meinem Fall sind die "Bilder" jeweils 200px breit, deshalb werden sie untereinander angeordenet, sobald die Viewportbreite unter 400px ist. Als Flexbox-Container dient in meinem Fall das <article> Element. Du kannst es live testen. Du wirst natürlich andere Breiten haben und das Ganze auch nicht so wie auf der Beispielseite links oben kleben haben wollen, aber wenn Du das Prinzip verstanden hast, kannst Du die Sache ja für Dich modifizieren.

Mit lieben Grüßen

Melvin Cowznofski