Zadejte hledaný výraz...

CSS – Rozházený archív příspěvků

Petr Homoky
verified
rating uzivatele
(7 hodnocení)
25. 4. 2014 09:45:32
Ahoj.
Pro jeden projekt používám Bootstrap a nevím si rady. Mám archív příspěvků, každý příspěvek (jeho box) je však jinak dlouhý a já bych rád, aby pokud jsou tři sloupce, tak se udělali tři nudle příspěvků. Myslím, že víc pochopíte z následujících obrázků.
Takhle je to řešeno na hodně webech. Potřebuji ale řešení, že když uživatel zmenší okno nebo si to bude prohlížet na mobilu a bude tam mít jeden sloupec, tak aby šly články za sebou dle vydání, z čehož vyplývá, že není moc rozumné to natvrdo rozdělit do jednotlivých sloupců.
Máte s tím někdo nějaké zkušenosti? Děkuji za každou radu.
Jedná se o projekt: http://kuskodu.cz
Aktuální stav:
http://clipitto.com/9m7b7x
Požadovaný stav:
http://clipitto.com/HPcHxT
25. 4. 2014 09:45:32
https://webtrh.cz/diskuse/css-rozhazeny-archiv-prispevku/#reply1018288
MadMax
verified
rating uzivatele
(1 hodnocení)
25. 4. 2014 10:07:44
Ted obalujes kazdy prispevek
, musel bys spocitat kolik prispevku je na strance, vydelit tremi, tim stanovis pocet prispevku na sloupec a obalit tim
pozadovany pocet prispevku, ktery se pak bude drzet v jednom sloupci, stejne pro druhy a treti sloupec. Mozna pak budes muset poladit i styl pro
.
Na mobilu ti pak pod sebe skoci cele sloupce. Problem muze pak byt s chronologii vypisu.
25. 4. 2014 10:07:44
https://webtrh.cz/diskuse/css-rozhazeny-archiv-prispevku/#reply1018287
Petr Homoky
verified
rating uzivatele
(7 hodnocení)
25. 4. 2014 10:19:39
Tohle byla první věc, co mě napadla. Na druhou stranu to bude hrozná prasečina. Jako mám tam pouze jeden archív, ale stejně se mi tohle nezdá jako zrovna nejlepší řešení. Takhle se mi několikanásobí počet řádků a budu tam duplikovat kód. Není nějaká možnost to řešit třeba přes jQuery?
25. 4. 2014 10:19:39
https://webtrh.cz/diskuse/css-rozhazeny-archiv-prispevku/#reply1018286
MadMax
verified
rating uzivatele
(1 hodnocení)
25. 4. 2014 10:27:26
Nevim proc by se ti mel nekolikanasobit pocet radku a duplikovat kod, jen tim divem neobalis kazdy prispevek, ale cely sloupec, takze kodu bude vlastne min.
25. 4. 2014 10:27:26
https://webtrh.cz/diskuse/css-rozhazeny-archiv-prispevku/#reply1018285
Robert
verified
rating uzivatele
(8 hodnocení)
25. 4. 2014 11:09:38
Použij Masonry nebo hledej masonry without javascript.
25. 4. 2014 11:09:38
https://webtrh.cz/diskuse/css-rozhazeny-archiv-prispevku/#reply1018284
Petr Homoky
verified
rating uzivatele
(7 hodnocení)
25. 4. 2014 15:26:21
Nakonec jsem aplikoval toto:
Sickdesigner.com › Masonry in CSS
Funguje to velice dobře, až na to, že pokud mám prohlížeč s Webkitem (opear, chrome, safari), tak na hlavní straně kde je hodně článků, tak pokud mám dostatečnou šířku okna na tři sloupce, tak se pod tím vytvoří neskutečná mezera. Pokud však kliknete na další stránku, tak tam se tato chyba neprojevuje.
Odkaz na web:
Kus kódu
25. 4. 2014 15:26:21
https://webtrh.cz/diskuse/css-rozhazeny-archiv-prispevku/#reply1018283
Pro odpověď se přihlašte.
Přihlásit