Autor Zpráva
xxxadam577
Profil
Zdravím. Float mi boxy dává do řádků. Bohužel potřebuji, aby se řadili pod sebou -> aby mezi nimi nebyli mezery (mluvím o těch prostředních boxexh).
Tu je kód :)
Děkuju za pomoc
Tomášeek
Profil
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.
Keeehi
Profil
Ž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.
pcmanik
Profil
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
Profil
Keeehi.
boxy vypíšu z DB, rád bych aby byly vedle sebe 1, 2, 3, ...
není možné toho nějak dosáhnout?
Kdyby tam byly takhle napevno, tak je to možný. Když je vypisuji, jak je rozdělím na sloupce rovnoměrně
weroro
Profil
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.
pcmanik
Profil
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;
weroro
Profil
pcmanik:
vertical-align: top; som mal z nejakého dôvodu asociované iba pri použití tabuliek. Dík za novú vedomosť.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: