Autor | Zpráva | ||
---|---|---|---|
xxxadam577 Profil |
#1 · Zasláno: 23. 8. 2017, 10:19:30
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 |
#3 · Zasláno: 23. 8. 2017, 11:23:14
Ž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 |
#4 · Zasláno: 23. 8. 2017, 12:12:13
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 |
#5 · Zasláno: 23. 8. 2017, 12:14:03
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 |
#8 · Zasláno: 23. 8. 2017, 13:04:34
pcmanik:
vertical-align: top; som mal z nejakého dôvodu asociované iba pri použití tabuliek. Dík za novú vedomosť. |
||
Časová prodleva: 7 let
|
0