Wie implementieren Sie ein teilweise flexibles Bildschirmlayout mit einem Raster -Framework?
-
26-10-2019 - |
Frage
Ich versuche, das folgende Bildschirmlayout mit einem CSS -Raster -Framework (Blueprint) zu implementieren, aber erfolglos:
Wie kann dies mit einem Gittergerüst erreichen? Hat jemand ein CSS/HTML -Code -Beispiel zum Teilen? Vielen Dank.
PS: Der Grund, warum ich ein Framework verwenden möchte sicher Framework ist in Ordnung, es muss keine Blaupause sein).
Lösung 2
Nachdem ich tief in dieses Problem eingegriffen hatte, musste ich verstehen, dass es unmöglich ist, es mit einem Raster -Framework zu lösen. Das Problem ist, dass ein paar Höhen und Breiten einander abgeleitet werden. Abhängig vom Inhalt der "zentralen" Zelle können auch Schleifstangen ebenfalls erscheinen.
Ich fand eine lange Lösung mit JavaScript. Ich definiere zuerst die verschiedenen Zellen meines Bildschirms mit Divs in meinem HTML. Dann hole ich die Dokumentbreite und -höhe und setze die Breiten und Höhen der Zellen mit JQuery. Ich beginne mit Fixwerten, dann einfache Derivate, dann komplexe Derivate.
Für das Problem der Dia -Balken habe ich den erläuterten Trick verwendet hier. Ich stelle die Größe der zentralen Säule anhand des Vorhandenseins eines Schleifstabs an, der selbst von der Höhe der "zentralen" Zelle abhängt, die selbst von der Breite des Bildschirms abhängt.
Andere Tipps
Yaml sollte dazu in der Lage sein: http://www.yaml.de/fileadmin/examples/04_layouts_styling/3col_faux_columns.html
Oder vielleicht Flüssigkeit 960?http://designinfluces.com/fluid960gs/