Susimėtymas apie CSS

Eilinį kartą gražinant VU CSS’ą, iškilo man šiokia tokia dilema. Tarkime, turiu aš keturis iš eilės einančius block-level elementus:

<div id="div1">First Block</div>
<div id="div2">Second Block</div>
<div id="div3">Third Block</div>
<div id="div4">Fourth Block</div>

Tada tarkime, jog blokams pritaikome štai tokį stilių:

#div1 {
height: 100px;
float: left;
clear: right;
}
#div2 {
height: 40px;
float: right;
clear: right;
}
#div3 {
height: 40px;
float: left;
clear: left;
}
#div4 {
height: 40px;
float: right;
clear: right;
}

Taigi — kas man gali tiksliai pasakyti, kur turėtų atsidurti ketvirtasis blokas? Klausimas kyla todėl, kad IE (tame tarpe ir IE7b2 preview) jį priklijuoja prie antrojo bloko apačios, o tuo tarpu Mozilla bei Opera jo viršų sulygiuoja su trečiojo bloko viršumi.

Tikriausiai aprašymas nelabai aiškus, tad yra ir live pavyzdys. ;)

11 komentarų apie “Susimėtymas apie CSS

  1. tai tu juos tiesiog sudek i dar 2 divus — 1 ir 2, 3 ir 4. ar cia filosofinis klausimas? :)

  2. Gal filosofinis… Nemėgstu nereikalingų divų. Juolab, kai tą problemą išsprendžiau per css. Tiesiog man įdomu, ar kartais nevertėtų kuriai nors šių naršyklių bugraportą užpildyt… :)

  3. nu divas bent jau ne table :) jis grupavimui ir skirtas.
    ir aš 99% įsitikinęs, kad tokiais atvejais kaltas IE, bet bugreportai manau čia nepadės :)

  4. Skirtas tai grupavimui, ale vistiek aš linkęs jo vengt, kai galiu. Nemėgstu sorso užteršinėti.

  5. Kad jau išsprendei problemą, siūlau dar iki visiško užsiperfekcionavimo pakeist divų idus į logiškesnius nei „div1”, pavyzdžiui „test_block_1”

  6. ash paprastai tokiu atvejudarau
    visi-divai {
    display: inline;
    float: left;
    width: 250px;
    }

    kairieji-divai {
    margin-right: 250px;
    }
    deshnieji-divai {
    margin-left: -250px;
    }

    tai va… gal shik tiek negrazhus sprendimas, bet veikia :)

Komentuoti: pumba Atšaukti atsakymą

El. pašto adresas nebus skelbiamas. Būtini laukeliai pažymėti *