Két oszlopos CSS-ben dinamikus tartalomtöltés

**Emphus** · 2013-10-30, 19:18

Sziasztok,

Van arra egyszerű, kliensoldali (HTML, CSS, nagyonmax. javascript) megoldás, amivel meg lehet oldani a következő problémát?
Adott két oszlop. A két oszlopban cikkek előnézetei jelennek meg - a cikk címe, és egy rövid leírás hozzájuk. A rövid leírás hossza viszont változó. Azt szeretném megoldani, hogy a változó leíráshossz ellenére se legyenek üres "lyukak" az oszlopokban, de úgy, hogy a cikkek továbbra is fentről-lefele és balról-jobbra kövessék egymást sorban. Olyan mint egy táblázat, csak éppen a cellákban változó hosszúságú tartalom van, így ha egy cellában sok a tartalom, a vele egy sorban lévőé meg kevés, akkor a kevés tartalommal rendelkező cellában marad egy jó adag üres hely. Ezt szeretném eltüntetni (az alatta lévő cikk bevezetőjét feljebb hozni).

Lehetőleg ne táblázat legyen, hanem egy cím + bevezető páros egy auto magasságú, de fix. szélességű div-ben legyen.

Grafikusan a probléma megjelenítése:
- Ez van most...

- Ilyet szeretnék...

**Geri** · 2013-10-30, 19:24

Ilyesmire gondolsz? Masonry

**Emphus** · 2013-10-30, 19:49

Igen, csak ez egy picit bonyolult szerintem a feladathoz. Meg egyelőre kapok rá egy ilyen errort: "TypeError: can't access dead object".

Ill. hátha van csak szín HTML és CSS megoldás.

Remélem.

**DomainFlotta** · 2013-10-30, 19:54

Csak egy tipp: a cikkeket rakhatnád divbe és rá float leftet

**Emphus** · 2013-10-30, 19:56

DomainFlotta eredeti hozzászólása

Csak egy tipp: a cikkeket rakhatnád divbe és rá float leftet

Köszi, de így van most. De ez nem úgy rendezi be, ahogy kell. Ld. 1. ábra. (A különbség ehhez képest, hogy egy div az nem egy "négyszög" az első ábrán, mert nem tartalmazza az üres területet, ahnem a divek között lesz az üres terület.)

**kléni** · 2013-10-30, 19:59

A két oszlopot két div-vel old meg, akinek van float:left tulajdonságuk, és a szélességük is be van állítva. Ezeken belül már bármilyen magasak lehetnek a cikkek előnézetét tartalmazó div-ek. Ne adj meg height-et az előnézeteknek, akkor addig érnek, amíg a szöveg tart.

**Emphus** · 2013-10-30, 20:01

kléni eredeti hozzászólása

A két oszlopot két div-vel old meg, akinek van float:left tulajdonságuk, és a szélességük is be van állítva. Ezeken belül már bármilyen magasak lehetnek a cikkek előnézetét tartalmazó div-ek. Ne adj meg height-et az előnézeteknek, akkor addig érnek, amíg a szöveg tart.

Köszi, de ezzel az a baj, hogy nem lesznek úgy sorrendben, ahogy szeretném. Megoldhatom, hogy minden páratlanadikat az elsőbe rakom, minden párosadikat a másodikba, de ezzel nem azt kapom, mint a 2. ábra (nézd csak meg, itt pl. az 5. és 6. cikk egy oszlopban van - direkt rajzoltam így, mert ilyen is előfordulhat - a Te megoldásodban sajnos külön oszlopban lennének).

**kléni** · 2013-10-30, 20:13

Akkor szerintem JS marad, mivel így a cikkek magasságától függ a sorrend, amint CSS-sel nem igen lehet megoldani.
Esetleg csinálhatod azt, hogy az előnézeti szövegekben lévő karakterek száma szerint megbecsülöd a div magasságát. Két változót létrehozol, ami az oszlop aktuális magasságát tárolja. Végigmégy a cikkeken, és amelyik oszlop magassága kisebb, ahhoz hozzáadod az aktuális cikket, az oszlop változójához a pedig a cikk magasságát, és jöhet a következő. Így nem kell megvárni, amíg a JS sorbarendezi.

**Emphus** · 2013-10-30, 20:20

kléni eredeti hozzászólása

Esetleg csinálhatod azt, hogy az előnézeti szövegekben lévő karakterek száma szerint megbecsülöd a div magasságát. Két változót létrehozol, ami az oszlop aktuális magasságát tárolja. Végigmégy a cikkeken, és amelyik oszlop magassága kisebb, ahhoz hozzáadod az aktuális cikket, az oszlop változójához a pedig a cikk magasságát, és jöhet a következő. Így nem kell megvárni, amíg a JS sorbarendezi.

Igen, a terv az volt, hogy ilyesmit fogok csinálni akkor, ha nem találok rá egy jó kis kliensoldali megoldást.

Köszi.

**Emphus** · 2013-11-01, 12:25

No, végül szerveroldali megoldás lett belőle, és meglepően jól működik 5 perc munkával.

Azért ha valakinek van tuti kliensoldali tippje rá (lehetőleg statikus, vagy ha dinamikus, akkor ne ágyúval galambra), ne tartsa magában.