Miten toteutan vierekkäiset, "kelluvat" elementit?

Onko mitään keinoa toteuttaa kolme vierekkäistä elementtiä, jotka hyppäävät vierekkäin tai allekkain siitä riippuen, miten leveältä näytöltä sivuja katsotaan? Ts. haluan välttää sivun sivuvierityksen kapealla näytöllä, mutta olisi kiva, jos elementit täyttäisivät leväen näytön tyylikkäästi ilman reunan tyhjää tilaa.

Elementti sisältäisi:
- otsikon
- vähän tekstiä ja
- näiden alla kuvan (ehkä 150 px leveä).

Apua :)?
2626
Äänestä

Muut lukivat myös

Vastaukset 2

Vanhimmat

Tässä yksi esimerkki.




.divi {float:left;width:350px;border:1px solid #000;}




Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla gravida nibh ac lectus ornare malesuada. Nulla pede. Sed condimentum mauris at massa. Nullam vitae nisi. Sed sed sem ac nisi gravida tincidunt. Aliquam risus. Mauris ultrices hendrerit augue. Vivamus sodales neque in turpis. Ut rutrum dolor luctus nisl luctus scelerisque. Nulla sed dui eget nibh pharetra imperdiet. Vestibulum adipiscing mattis dui. Sed turpis. Aliquam lorem dui, blandit eget, eleifend in, blandit eget, orci. Fusce et justo. Etiam ullamcorper pellentesque leo.


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla gravida nibh ac lectus ornare malesuada. Nulla pede. Sed condimentum mauris at massa. Nullam vitae nisi. Sed sed sem ac nisi gravida tincidunt. Aliquam risus. Mauris ultrices hendrerit augue. Vivamus sodales neque in turpis. Ut rutrum dolor luctus nisl luctus scelerisque. Nulla sed dui eget nibh pharetra imperdiet. Vestibulum adipiscing mattis dui. Sed turpis. Aliquam lorem dui, blandit eget, eleifend in, blandit eget, orci. Fusce et justo. Etiam ullamcorper pellentesque leo.


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla gravida nibh ac lectus ornare malesuada. Nulla pede. Sed condimentum mauris at massa. Nullam vitae nisi. Sed sed sem ac nisi gravida tincidunt. Aliquam risus. Mauris ultrices hendrerit augue. Vivamus sodales neque in turpis. Ut rutrum dolor luctus nisl luctus scelerisque. Nulla sed dui eget nibh pharetra imperdiet. Vestibulum adipiscing mattis dui. Sed turpis. Aliquam lorem dui, blandit eget, eleifend in, blandit eget, orci. Fusce et justo. Etiam ullamcorper pellentesque leo.

Äänestä
  • 1
    2
    3

    Äänestä

Kommentoi aloitusta


tyttö vain kirjoitti:

Onko mitään keinoa toteuttaa kolme vierekkäistä elementtiä, jotka hyppäävät vierekkäin tai allekkain siitä riippuen, miten leveältä näytöltä sivuja katsotaan? Ts. haluan välttää sivun sivuvierityksen kapealla näytöllä, mutta olisi kiva, jos elementit täyttäisivät leväen näytön tyylikkäästi ilman reunan tyhjää tilaa.

Elementti sisältäisi:
- otsikon
- vähän tekstiä ja
- näiden alla kuvan (ehkä 150 px leveä).

Apua :)?

Anonyymi
5000

Ilmoita asiaton sisältö

  • Sisältää materiaalia, joka on loukkaavaa, herjaavaa, rasistista, uhkailevaa tai ahdistelevaa.

  • Materiaali sisältää nimiä, yhteystietoja tai muita henkilökohtaisia tietoja. Julkisuuden henkilöistä, julkisissa viroissa toimivista ihmisistä sekä yritysten vastuuhenkilöistä saa keskustella työhön liittyen. Myös yksityiselämään liittyvistä asioista voi keskustella siltä osin, kuin niistä on julkisesti kerrottu.

  • Sisältää lapsille haitallista tai heiltä kiellettyä materiaalia. Seksuaalinen sisältö on sallittua aiheeseen tarkoitetuilla palstoilla, joiden ikäraja on 18 vuotta.

  • Lainvastaista sisältöä voi olla mm. yksityiselämää loukkaavan tiedon levitys, kiihottaminen kansanryhmää vastaan, laiton uhkaaminen, alaikäisiin liittyvä seksuaalinen sisältö/grooming, petokset, identiteettivarkaudet, kunnianloukkaukset ja tekijänoikeusrikkomukset.

  • Sisältö ei liity palstan tai keskusteluketjun aiheeseen.

  • Viesti ei ole suomea tai ruotsia (pl. International Forums), se sisältää mainontaa, se sisältää tekijänoikeuksin suojattua materiaalia, se on massapostitus tai jokin muu syy.

Jaa keskustelu