Naudojant CSS plūduriuojančią nuosavybę kurti tinklalapių išdėstymus
CSS nuosavybė yra labai svarbi išdėstymo savybė. Tai leidžia jums nustatyti savo tinklalapio dizainą tiksliai taip, kaip norite rodyti, bet norint jį naudoti, jūs turite suprasti, kaip jis veikia.
CSS "plūdės" nuosavybės stiliaus lange pasirodo taip:
. right (float: right; }
Tai parodo naršyklei, kad viskas su "teisingos" klasės turėtų būti plūduriuojamos dešinėje.
Priskirtumėte jį taip:
class = "right" />
Ką galite plūduriuoti su CSS plūduriuojančiu turtu?
Negalite plisti kiekvieno elemento tinklalapyje. Jūs galite tik plūdėti bloko lygio elementus. Tai yra elementai, užimantys puslapio bloką, pvz., Vaizdai (), pastraipos (), skaidiniai () ir sąrašai ().
Kiti elementai, kurie įtakoja tekstą, bet nenustato puslapio dėžutės, vadinami inline elementais ir negali būti plūsta. Tai yra tokie elementai kaip span (), eilutės pertraukos (), stipraus dėmesio () arba kursyvu ().
Kur jie plūsta?
Galite plaukioti elementus į dešinę arba į kairę. Bet kuris elementas, kuris eina po plūduriuojančiu elementu, tekės aplink pervėtą elementą kitoje pusėje.
Pavyzdžiui, jei aš plūdiu vaizdą į kairę, bet koks tekstas ar kiti elementai po jo bus srautas aplink jį į dešinę. Ir jei aš plūdiu vaizdą į dešinę, bet koks tekstas ar kiti elementai po jo tekės aplink jį į kairę. Vaizdas, kuris yra dedamas į teksto bloką be jokio plūdės stiliaus, jis bus rodomas, tačiau naršyklė bus nustatyta rodyti vaizdus.
Paprastai tai yra pirmoji teksto eilutė, rodoma vaizdo apačioje.
Kiek toli jie taps?
Elementas, kuris buvo išplaukęs, pakils tiek kiek į kairę arba į dešinę nuo konteinerio elemento. Tai lemia keletą skirtingų situacijų, priklausomai nuo to, kaip parašytas jūsų kodas.
Dėl šių pavyzdžių aš išplėsiu mažą DIV elementą į kairę:
- Jei išplautas elementas neturi iš anksto nustatyto pločio, jis užims tiek horizontalią erdvę, kiek reikalinga ir prieinama, nepriklausomai nuo plūdės. Pastaba: kai kurios naršyklės bando įdėti elementus šalia plūduriuojančių elementų, kai plotis nėra apibrėžtas - paprastai neplėstiniam elementui suteikiama tik nedidelė vietos dalis. Taigi visada turėtumėte apibrėžti plūduriuojamų elementų plotį .
- Jei konteinerio elementas yra HTML elementas, plūduriuojantis DIV sėdės kairėje puslapio parajonyje.
- Jei konteinerio elementas pats yra su kita, jis bus dedamas į konteinerio kairę.
- Galite prikabinti išplėstas elementus, o tai gali sukelti, kad plūduras pasidarys stebina vieta. Pavyzdžiui, šis plūduras yra paliktas plūduras DIV viduje dešiniajame plūduriuojančiame DIV.
- Plūdiniai elementai sėdi šalia vienas kito, jei konteineryje yra vietos. Pavyzdžiui, šioje talpykloje yra trys 100 piks. Plačios DIV elementai, plaukioti 400 piks. Pločio talpykloje.
Galite netgi naudoti plūdes, norėdami sukurti nuotraukų galerijos išdėstymą. Jūs įtraukėte kiekvieną miniatiūrą (tai geriausiai veikia, kai jie yra vienodo dydžio) DIV su antrašte ir plūduriuojame DIV elementus konteineryje.
Nesvarbu, koks plotis yra naršyklės langas, miniatiūros bus vienodai išdėstytos.
Išjungimas iš plūdės
Kai sužinosite, kaip elementą išplaukti, svarbu žinoti, kaip išjungti plūdinį elementą. Jūs išjungiate plūdę naudodami CSS skaidrumą. Galite išvalyti kairiuosius plūdus, teisingus plūdes arba abu:
aišku: kairėn;
aišku: teisinga;
aišku: abu;
Bet kuris elementas, kurį nustatote aiškią nuosavybės būseną , bus rodomas žemiau elemento, kuris yra išplėstas toje kryptyje. Pavyzdžiui, šiame pavyzdyje pirmos dvi teksto dalys nėra išvalytos, bet trečias yra.
Paleiskite su aiškia įvairių dokumentų elementų verte, kad gautumėte skirtingus išdėstymo efektus.
Vienas iš įdomiausių išplėstų maketų yra paveikslėlių serija, esanti dešinėje ar kairėje stulpelyje šalia teksto dalių. Net jei tekstas nėra pakankamai ilgas, kad galėtumėte slinkti praeinant vaizdą, galite naudoti visų vaizdų aiškumą, kad įsitikintumėte, ar jie rodomi stulpelyje, o ne šalia ankstesnio vaizdo.
HTML (pakartokite šią pastraipą):
Duis aute irure dolor sed dai eiusmod tempora incididunt reprehenderit voluptate. Cupidatat ne proident, ut labore et dolore magna aliqua.
CSS (norint išplėsti vaizdus į kairę):
img.float (float: left;
aišku: kairėn;
marža: 5 px;
}
Ir dešinėje:
img.float (float: right;
aišku: teisinga;
marža: 5 px;
}
Plokščių naudojimas maketui
Kai suprasite, kaip veikia plūduriuojanti nuosavybė, galite pradėti ją naudoti norėdami išdėstyti savo tinklalapius. Tai yra žingsniai, kuriuos aš imu kurti išplėstinį tinklalapį:
- Suplanuokite išdėstymą (ant popieriaus, grafikos įrankio ar mano galvoje).
- Nustatykite, kur bus puslapių padalijimai.
- Nustatykite įvairių konteinerių ir jų elementų plotį.
- Plūduriuosi viską. Net išorinis konteinerio elementas yra plaustas į kairę, todėl aš žinau, kur jis bus susijęs su naršyklės rodinio prievadu.
Tol, kol žinote, kad išdėstymo sekcijos yra pločiai (procentai yra gerai), galite naudoti plūdės nuosavybę, kad galėtumėte juos įtraukti ten, kur jie priklauso. Ir malonus dalykas, jums nereikia jaudintis dėl to, kad "Internet Explorer" ar "Firefox" skiriasi dėžutės modelis.