Beseitigung toter Raum in Mauerwerk artigen Schwimmer Layout

Question

ich auf einer Produktseite Layout arbeite, die zwei Spalten mit verschiedenen Höhen Elemente hat. Ich versuche zu vermeiden, die Elemente in zwei Säulenbehälter zu verschachteln, so dass ich die optimale Reihenfolge der Elemente auf kleinen Bildschirmen haben kann, die zu einer Spalte gehören.

Das Problem I in leite ist, dass manchmal der zweite Block (schwamm links) länger ist als der erste Block (schwamm rechts), und manchmal ist das Gegenteil wahr. Das Problem tritt auf, wenn der dritte Block clear: left gegeben wird, um sicherzustellen, es ist so weit rechts wie es gehen kann, der vierte Block nicht über die Höhe des dritten Blocks gehen.

Hier ist ein CodePen mit dem Code: http://codepen.io/anon/pen/jAQdEK?editors=1100#anon-login

Answer 1

Was Sie wollen, mir sieht aus wie eine Layout-Tabelle zu tun. Mit display Typen table, table-row und table-cell könnte eine einfache und solide Lösung für das sein. Siehe:

http://codepen.io/wortwart/pen/grQqzv