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

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

(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

(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

(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

(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

(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