Wie lege ich ein div zurück, je nach Gerätebreite mit flexbox?
Ich versuche, zwei verschiedene Layouts abhängig von der Gerätebreite zu haben, also würde ich bevorzugen, das gleiche HTML-Layout für beide zu haben und einfach eine Medienabfrage in CSS zu verwenden.
Auf beiden Geräten habe ich ein Bild (dargestellt durch die grüne Box), das immer oben links auf dem Bildschirm angezeigt wird. Und direkt daneben ist der Titel div, der immer am selben Ort sein wird.
Das problematischste div ist die Beschreibung div. Dieses div soll mit dem Titel ausgerichtet sein, wenn es auf dem Desktop ist, aber es sollte sich selbst unterhalb des Bildes befinden, wenn es auf dem Handy ist.
Das folgende Bild wurde mit float erstellt, aber float ist auch nicht ideal, weil das div-Dokument lange genug ist und schließlich nach links (auf dem Desktop) fließt, was nicht das gewünschte Aussehen ist. Auf dem Desktop sollte es immer zwei klare Spalten geben, die Beschreibung sollte nicht unter dem Bild div enden.
Ich schätze jede Anleitung, wie man das mit flexbox macht, danke!
Als Referenz hier mein Versuch mit float (beachte, dass ich float nicht verwenden möchte):
%Vor%5 Antworten
Dies wäre eine mögliche Lösung. Beachten Sie, dass Sie die Abmessungen des Bildes (grünes Feld) in Ihrem CSS-Code angegeben haben. Ich habe diesen Code darauf basiert.
Hier ist das Jfiddle:
Sie können ein margin auf der Desktop-Beschreibung verwenden, damit es nicht auf der linken Seite fließt. Dann lösche den Float auf dem Handy.
Es gibt eine wirklich einfache Ergänzung für Ihren Code, damit er funktioniert:
Fügen Sie "overflow: hidden" zur Beschreibung hinzu. Dann wird es nicht nach links fließen, wenn es lang genug ist.
Der Grund, warum es funktioniert, ist etwas, das " Block-Formatierungskontext genannt wird ". Dies ist im Grunde eine der verschiedenen Möglichkeiten, dem Browser mitzuteilen, dass der darin enthaltene Inhalt ein "isolierter" Block ist und als solcher behandelt werden sollte.
Siehe die folgende Geige mit Ihrem Code funktioniert: Ссылка
%Vor%Dies ist leider kein Kandidat für flexbox - Sie haben Elemente, die sowohl mit Zeilen als auch mit Spalten aufgereiht sind.
Ich empfehle stattdessen die absolute Positionierung. Im folgenden Beispiel entspricht die margin-left , die den Beschreibungs- und Titelelementen zugewiesen wird, der Breite Ihres Bildes.
Da ich eine Medienabfrage hinzugefügt habe, möchten Sie das Snippet erweitern und die Größe Ihres Browsers ändern, um den Effekt zu sehen.