Avatar
motorovapila
Člen
Avatar
motorovapila:

Zdravím,
Potřeboval bych pomoct s řazením divu
mám několik divu

<style>
#list {
                    background-color: #f9f9f9;
                    border: 1px solid #eeeeee;
                    margin: 5px;
                    padding: 5px;
                    float: left;
                    width: 250px;
                    display:block;
                    text-align: justify;
                }
</style>

<div id="list"></div>
<div id="list"></div>
<div id="list"></div>
.
.
.
.

zobrazují se nasledovně obrazek: 1.jpg což je v pořádku
a potřebuji když se zalomí na 2 čádek aby se radily podle obrázku 2.jpg

netušíte jak na to? Nebo nemáte na to nějaký tutoriál?

 
Odpovědět 2.10.2014 8:49
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na motorovapila
Honza Bittner:

Máš několik možností, sám si urči, co chceš:

  1. Buď si uděláš 4 divy, kde každý bude reprezentovat 1 sloupec a v sobě bude mít další menší bůhvíco
  2. Použiješ CSS3 vlastnost column-count(prefixuje se) - ale je to CSS3 => není podpora ve starších prohlížečích
  3. Využiješ nějakého JS pluginu, např.

    a. http://packery.metafizzy.co/

    b. http://gridster.net/

    c. http://mcpants.github.io/….shapeshift/

    d. http://suprb.com/apps/nested/

Editováno 2.10.2014 9:16
Nahoru Odpovědět 2.10.2014 9:15
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Odpovídá na motorovapila
Daniel Vítek:

Já dělal něco podobnýho přes :nth-child v CSS

 
Nahoru Odpovědět 2.10.2014 9:32
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.