Srovnání boxů pod sebou

xxxadam577:
Že float řadí bloky vedle sebe je naprosto v pořádku. To je jeho funkce.

Jak by to tedy mělo vypadat "správně"? Nějak jsem to z toho popisu nepochopil.

EDIT: díky #3 jsem už pochopil, jakou mezeru myslíš. Můj příspěvek je tedy už mimo.

Živá ukázka
Problém toho je, že pokud uvažuješ nad responzivní verzí, kde se ty sloupce přeskládají pod sebe, pak jejich pořadí bude: 1, 4, 2, 5, 3, 6. Nebo celý problém se dá vyřešit pohodlně flexboxem. Jeho momentální podpora je cca 97% prohlížečů, problémy mají samozřejmě explorery.

Keeehi:
Flexbox je fuj ešte si sa nepoučil? :) Čoskoro sa sem vráti Tomášeek a bude tu hovoriť o štatistikách ich e-shopu, ktorý nám nechce ukázať.

xxxadam577:
Na to aby sa ti radili tak ako si predstavuješ by bolo nutné aby mali nastavený max-height. Inak by som im nastavil display: inline-block a zrušil float. Problém pri inline-block je, že budú boxíky zarovnané na spodok riadku a tak budú rozdieli vo výške nie zo spodu ale z vrchu.

weroro:
„Problém pri inline-block je, že budú boxíky zarovnané na spodok riadku a tak budú rozdieli vo výške nie zo spodu ale z vrchu.“
To sa dá obísť cez CSS vlastnosť vertical-align: top;

xxxadam577:
Aby mali boxíky rovnakú výšku môžeš použiť flex, alebo sa hrať s display: table; pre wrapper a display: table-cell; pre samotné boxíky. A keďže máš dva riadky budeš musieť pridať ešte na každý riadok wrapper s display: table-row;

pcmanik:
vertical-align: top; som mal z nejakého dôvodu asociované iba pri použití tabuliek. Dík za novú vedomosť.