Eredmény: 1 - 10 (10) összesen

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

  1. #1
    'Say Hello To My Little Friend'
    Csatlakozott
    10-04-13
    Hely
    Budapest
    Hozzászólás
    2.784
    Begyűjtött 863 köszönetet
    659 hozzászólásával

    Alapbeállítás Két oszlopos CSS-ben dinamikus tartalomtöltés

    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...




  2. #2
    Rubyist Geri logója
    Csatlakozott
    07-12-15
    Hely
    \x90
    Hozzászólás
    5.605
    Begyűjtött 1.332 köszönetet
    828 hozzászólásával

    Alapbeállítás re: Két oszlopos CSS-ben dinamikus tartalomtöltés

    Ilyesmire gondolsz? Masonry



  3. Az alábbi felhasználók hálásak a válaszért:

    Emphus (2013-10-30)

  4. #3
    'Say Hello To My Little Friend'
    Csatlakozott
    10-04-13
    Hely
    Budapest
    Hozzászólás
    2.784
    Begyűjtött 863 köszönetet
    659 hozzászólásával

    Alapbeállítás re: Két oszlopos CSS-ben dinamikus tartalomtöltés

    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.



  5. #4
    Bölcs DomainFlotta logója
    Csatlakozott
    12-05-20
    Hely
    Budapest
    Hozzászólás
    2.774
    Begyűjtött 1.129 köszönetet
    646 hozzászólásával

    Alapbeállítás re: Két oszlopos CSS-ben dinamikus tartalomtöltés

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



  6. #5
    'Say Hello To My Little Friend'
    Csatlakozott
    10-04-13
    Hely
    Budapest
    Hozzászólás
    2.784
    Begyűjtött 863 köszönetet
    659 hozzászólásával

    Alapbeállítás re: Két oszlopos CSS-ben dinamikus tartalomtöltés

    Idézet DomainFlotta eredeti hozzászólása Hozzászólás megtekintése
    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.)


    Utoljára módosítva: Emphus által : 2013-10-30 20:22

  7. #6
    Tag kléni logója
    Csatlakozott
    13-05-27
    Hely
    Nyíregyháza
    Hozzászólás
    71
    Begyűjtött 10 köszönetet
    10 hozzászólásával

    Alapbeállítás re: Két oszlopos CSS-ben dinamikus tartalomtöltés

    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.



  8. #7
    'Say Hello To My Little Friend'
    Csatlakozott
    10-04-13
    Hely
    Budapest
    Hozzászólás
    2.784
    Begyűjtött 863 köszönetet
    659 hozzászólásával

    Alapbeállítás re: Két oszlopos CSS-ben dinamikus tartalomtöltés

    Idézet kléni eredeti hozzászólása Hozzászólás megtekintése
    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).


    Utoljára módosítva: Emphus által : 2013-10-30 20:22

  9. #8
    Tag kléni logója
    Csatlakozott
    13-05-27
    Hely
    Nyíregyháza
    Hozzászólás
    71
    Begyűjtött 10 köszönetet
    10 hozzászólásával

    Alapbeállítás re: Két oszlopos CSS-ben dinamikus tartalomtöltés

    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.



  10. Az alábbi felhasználók hálásak a válaszért:

    Emphus (2013-10-30)

  11. #9
    'Say Hello To My Little Friend'
    Csatlakozott
    10-04-13
    Hely
    Budapest
    Hozzászólás
    2.784
    Begyűjtött 863 köszönetet
    659 hozzászólásával

    Alapbeállítás re: Két oszlopos CSS-ben dinamikus tartalomtöltés

    Idézet kléni eredeti hozzászólása Hozzászólás megtekintése
    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.


    Utoljára módosítva: Emphus által : 2013-10-30 20:23

  12. #10
    'Say Hello To My Little Friend'
    Csatlakozott
    10-04-13
    Hely
    Budapest
    Hozzászólás
    2.784
    Begyűjtött 863 köszönetet
    659 hozzászólásával

    Alapbeállítás re: Két oszlopos CSS-ben dinamikus tartalomtöltés

    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.



Könyvjelzők

Hozzászólás szabályai

  • Új témákat nem hozhatsz létre
  • Válaszokat nem küldhetsz
  • Fájlokat nem csatolhatsz
  • A hozzászólásaidat nem módosíthatod
  •