Wie implementieren Sie ein teilweise flexibles Bildschirmlayout mit einem Raster -Framework?

StackOverflow https://stackoverflow.com/questions/8327794

  •  26-10-2019
  •  | 
  •  

Frage

Ich versuche, das folgende Bildschirmlayout mit einem CSS -Raster -Framework (Blueprint) zu implementieren, aber erfolglos:

enter image description here

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).

War es hilfreich?

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

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top