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.
Avatar
Grimor
Člen
Avatar
Grimor:7.2.2015 21:23

Ahoj,

narazil jsem na malý problém, je to asi defaultním nastavením v CSS a já nevím jak to změnit.

<div style="background: red; width: 600px; margin: auto;">
        <?php
                for($i=1;$i<21;$i++){
                        if($i%2==0)
                                $float = "right";
                        else
                                $float = "left";
                        echo "<div style='margin: 1px; width: 298px;height: ".rand(100,300)."px; background: blue; float:".$float.";'></div>";
                }
        ?>
</div>

Začnou se mi zobrazovat jednotlivé divy o náhodných výškách ale konstantních šířkách. Chci aby se pěkně pod sebou dlaždicovitě řadily, ale ony se někdy seknou a nějakým způsobem jako kdyby odřádkují a vzniká mi mezi dlaždicemi nad sebou nevyužitý prostor. Je to divem nebo nějakým modem toho divu? Šlo by to udělat, aby se využil veškerý prostor?

 
Odpovědět
7.2.2015 21:23
Avatar
Tonda Kozák
Člen
Avatar
Tonda Kozák:7.2.2015 22:31

(Příště, když budeš mít problém, který se týká HTML/CSS, tak dej výsledný HTML kód a ne PHP.)

Kdyby sis do toho každého divu napsal, jestli má být vlevo, nebo vpravo, tak by s přišel na to, že ne všechny s float left jsou nalevo a ne všechny s float right jsou napravo - http://kod.djpw.cz/cfkb.
Div s float left se totiž sice snaží být co nejblíže levému okraji, ale také zároveň (s vyšší prioritou) co nejblíže vrchu. Proto se někdy může umístit vedle jiného bloku s float left.

Řešením je nedeklarovat těmto divům float, ale dát je do dvou obalových divů širokých těch 300px, rozplavat je, aby byly vedle sebe a jednotlivé bloky vkládat do nich. Takto: http://kod.djpw.cz/bfkb

 
Nahoru Odpovědět
7.2.2015 22:31
Avatar
Uživatel sítě
Tvůrce
Avatar
Odpovídá na Tonda Kozák
Uživatel sítě :7.2.2015 22:36

Tonda Kozák: Myslím si, že z tohoto si dokážeš udělat výsledný html.. ;)

Grimor: Mě napadlo vlastně to samé co Tondu, avšak když a to zcela určitě bude jedna strana větší tak se nedoplní z toho druhé ho sloupce:

<div style="background: red; width: 600px; margin: auto;">
  <div style="float:left;">
        <?php
    for($i=1;$i<21;$i++){
        echo "<div style='margin: 1px; width: 298px;height: ".rand(100,300)."px; background: blue;'></div>";
    }
        ?>
  </div>
  <div style="float:left;">
        <?php
    for($i=1;$i<21;$i++){
        echo "<div style='margin: 1px; width: 298px;height: ".rand(100,300)."px; background: blue;'></div>";
    }
        ?>
  </div>
</div>

Btw: Nebylo by lepší použít table či potřebuješ div?

Editováno 7.2.2015 22:37
Nahoru Odpovědět
7.2.2015 22:36
Chybami se člověk učí, běžte se učit jinam!
Avatar
Grimor
Člen
Avatar
Grimor:7.2.2015 22:56

To je hezké, ale já potřebuji plnit oba sloupce naráz, jeden po druhém nestačí. Dva sloupce jsem chtěl spíš pro vysvětlení, ale cílem jsou tři sloupce. Není nějaká vlastnost v CSS, aby float zajímala jen horizontální a ne vertikální poloha?

O tabulkách jsem nepřemýšlel, dokázaly by vyřešit plnění jen jedním cyklem?

 
Nahoru Odpovědět
7.2.2015 22:56
Avatar
Tomáš Maňhal
Člen
Avatar
Odpovídá na Grimor
Tomáš Maňhal:7.2.2015 23:01

Myslím, že tvé problémy s pozicováním a velikostí elementů může šikovně vyřešit grid :-) Rozdělení stránky na pomyslné sloupce, podobně jako to využívá bootstrap :-)

 
Nahoru Odpovědět
7.2.2015 23:01
Avatar
Tonda Kozák
Člen
Avatar
Odpovídá na Uživatel sítě
Tonda Kozák:8.2.2015 9:51

Jistěže si z toho udělat výsledné HTML dokážu, ale na druhou stranu chce radu, tak je v jeho zájmu mi to co nejvíce ulehčit.

Grid není dostatečně podporován prohlížeči.

Grimor
Potřebuješ plnit oba sloupce naráz? Nemůžeš to udělat tímto způsobem?

<div style="background: red; width: 600px; margin: auto;">
        <?php
                $levy_sloupec = "";
                $pravy_sloupec = "";
                for($i=1;$i<21;$i++){
                        if($i%2==0) {
                                $levy_sloupec .= "<div style='margin: 1px; width: 298px;height: ".rand(100,300)."px; background: blue;'></div>";
                        } else {
                                $pravy_sloupec .= "<div style='margin: 1px; width: 298px;height: ".rand(100,300)."px; background: blue;'></div>";
                        }
                 }
                 echo "<div style='float: left; width: 300px'>$levy_sloupec</div>";
                 echo "<div style='float: left; width: 300px'>$pravy_sloupec</div>";
        ?>
</div>
Editováno 8.2.2015 9:55
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
8.2.2015 9:51
Avatar
Tomáš Maňhal
Člen
Avatar
Odpovídá na Tonda Kozák
Tomáš Maňhal:8.2.2015 10:04

Omlouvám se za offtopic...
Který prohlížeč má problémy s Gridem? Není mi to známo :-)

 
Nahoru Odpovědět
8.2.2015 10:04
Avatar
Tonda Kozák
Člen
Avatar
Odpovídá na Tomáš Maňhal
Tonda Kozák:8.2.2015 10:17

Máš pravdu, omlouvám se, četl jsem grid a nějak mi to v mozku přeskočilo na flexbox. :-)

 
Nahoru Odpovědět
8.2.2015 10:17
Avatar
Grimor
Člen
Avatar
Grimor:8.2.2015 10:33

Ano, to by asi skoro mohlo být. Ale nejsem si jistý, jak bych to nakonec udělal přes JS, aby se po doscrollování až dolů začaly načítat další.

Každopádně jsem přes noc našel Masonry grid, takže to by mělo vyřešit všechny mé problémy. Všem děkuji za rady. :)

 
Nahoru Odpovědět
8.2.2015 10:33
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 9 zpráv z 9.