NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.

Diskuze: Řrazení divu (dlaždice)

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Jak se ti líbí článek?
Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500
Jak se ti kurz líbí?
Tvé hodnocení kurzuZnaků 0 z 50-500
Aktivity
Avatar
motorovapila
Člen
Avatar
motorovapila:2.10.2014 8:49

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
Tvůrce
Avatar
Odpovídá na motorovapila
Honza Bittner:2.10.2014 9:15

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
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na motorovapila
Neaktivní uživatel:2.10.2014 9:32

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

Nahoru Odpovědět
2.10.2014 9:32
Neaktivní uživatelský účet
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.