HTML/CSS responsive design!?

[Bububoomt]

wer kann mir helfen bei der Umsetzung von folgendem:

Ich habe ein Bild, und neben diesem Bild sollen 3 Elemente (untereinander) Bild,Bild, Text
Wenn der Platzt nicht ausreicht , sollen die 3 Elemnete unter dem Bild angezeigt werden.

Wer hat Tipp wie ich das angehen muss?

 

[theHacker]

Das macht der Browser automatisch, wenn nach rechts kein Platz mehr is, dass er dann drunter anzeigt.
Um deine 3 Elemente nun "zu verbinden", dass nicht nur eins runterrutscht, machst du einfach n Div um sie rum, dass der Browser sie nur ganz oder gar nicht verschieben kann.

 

[Bububoomt]

Ja so einfach dachte ichs mir eigentlich auch, aber, wenn ich Div nutze, dann ist das ja ncht in der gleichen "höhe", es ist unter dem bild, mache ich display:inline, dann sind aber auch die Elemente darin Inline, ändere ich die internen auf block, dann ist es wieder unterm Bild...

Argh, Wenn ich Float nutze, dann ist passt sich umgebene Div (Rahmen) nicht an...

Kleines Beispiel (nicht von mir):
So was in der Art: https://digitalkamera-testportal.com/panasonic-fz150-im-test/

Da ist so was in der Art, ich will nur das AmazonBild+Button, dann unter dem Bild ist, wenn der Bildschirm zu schmal ist.

 

[theHacker]

Versteh ich ned, was du meinst. Was an dem Beispiel meinst du?

Guckst du:
https://jsfiddle.net/9QxUq/

 

[apolle]

Versuchs mal mit <span> statt <div> damit vermeidest Du zumindest schon mal die Zeilenumbrüche.

https://webdesign.about.com/od/htmltags/p/aaspantag.htm
https://webdesign.about.com/od/htmltags/p/bltags_span.htm
https://www.html-seminar.de/block-elemente-und-inline-elemente.htm