Diskuze: CSS - skládání obrazků pod sebe

HTML a CSS HTML a CSS CSS - skládání obrazků pod sebe American English version English version

Avatar
ts.cerny
Člen
Avatar
ts.cerny:

Ahoj,

chtěl bych poprosit o radu ohledně automatického rovnání obrázků pod sebe.

Resp. mám obrázky, které mají vždy stejnou šířku (400px), ale výška je vždy jiná v závislosti na poměru stran. Chtěl bych, aby se mi obrázky skládali do sloupečků vedle sebe v závislosti na velikosti okna prohlížeče. A v každém sloupci aby byly obrázky těsně pod sebou bez mezer. Myslel jsem, že to vyřeším nastavením CSS vlastnosti float: left; ale asi jsem si to představoval moc jednoduše. Takto dosáhnu špatného výsledku viz náhled.

Můžete mi, prosím, poradit - kde dělám chybu a jak donutit obrázky aby se pěkně skládaly pod sebe bez mezer?

Moc díky za každou radu.

 
Odpovědět 7.8.2015 17:36
Avatar
shaman
Člen
Avatar
Odpovídá na ts.cerny
shaman:

Myslim ze najlepsie vysledky dosiadnes s nejakou javascriptovou kniznicou, pretoze ty chces vypnit dynamicky ten priestor. Sametne CSS neprepocita volne miesto. Daj si vyhladat v google "grid layout jquery" a najde ti nejake kniznice. Ja som pouzil v minulosti masonry https://github.com/…ndro/masonry a celkom dobre to fungovalo.
Demo najdes aj tu: http://www.erikjohanssonphoto.com/work

Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
Nahoru Odpovědět 7.8.2015 19:47
try {...} catch (Exception ignored) { echo " ¯\_(ツ)_/¯ "; }
Avatar
ts.cerny
Člen
Avatar
ts.cerny:

To bude ono. Moc díky za typ.

 
Nahoru Odpovědět 7.8.2015 20:10
Avatar
Denis Homolík (Alfonz):

Podle mě by to šlo vyřešit kdyby jsi ty obrázky neřadil do řádků, ale do sloupců, prostě si udělá pár plovoucích sloupců, které budou mít šířku 400px a pak už jen ty sloupce vyplníš obrázky :)

Nahoru Odpovědět 9.8.2015 0:18
Vše je možné, dokud si to myslíte!
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na ts.cerny
Jiří Gracík:

Není zas tak těžké si to napsat sám, můžeš to někdy v rámci procvičování zkusit.

Nahoru Odpovědět 9.8.2015 0:32
Creating websites is awesome till you see the result in another browser ...
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Denis Homolík (Alfonz)
Jiří Gracík:

Samozřejmě, tady jde jen o to, jak je tam nasázet, nic jiného :)

Nahoru Odpovědět 9.8.2015 0:34
Creating websites is awesome till you see the result in another browser ...
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 6 zpráv z 6.