float css-arvot. Vaihtoehdot kelluvien ja läpinäkyvien säiliöiden sijoittamiseen CSS:ään - lohkoasettelutyökalut. HTML-tunnisteen attribuutit

Osoittaaksesi float-ominaisuuden tärkeyden tässä esimerkissä, tässä on kuvakaappaus samasta kuvasta, kun float on poistettu firebugilla: left:

Ruudukkopohjaiset valokuvagalleriat

Yksinkertainen float-ominaisuuden käyttö on float:left sarjan kuvia, jotka sisältyvät järjestämättömään luetteloon, mikä tuottaa saman tuloksen kuin taulukon merkinnöissä.

Foremostin Kanadan tuotesivulla (katso kuva yllä) sen tuotteet näkyvät ruudukkomuodossa sivupalkin vieressä. Valokuvat näytetään järjestämättömänä luettelona, ​​jossa on float-ominaisuus, kaikille

Paragon Furnituren futon-sivu (katso kuva yllä) on toinen esimerkki tuotesivusta, joka käyttää järjestämätöntä luetteloa kelluvilla tunnisteilla

iStockphoton hakutulossivulla (katso kuva yllä) on sama strukturoitujen kuvien ruudukko, tässä kuvat sisältävät float:left

Tasaus kentät painikkeella

Oletusmuotoelementtien mallintaminen eri selaimille voi olla ongelmallista. Usein sinun täytyy laittaa yhteen lomakekenttään, kuten hakulomakkeeseen elementti "lähetä" -painikkeen vieressä.

Pitkä eepos kirjoittaa artikkeli "float" -ominaisuudesta on ohi. Se saattoi viedä paljon aikaa, mutta mielestäni pystyin selkeimmin tiivistämään tämän voimakkaan ja hieman omituisen ominaisuuden kaikki erilaiset käyttäytymismuodot yhdeksi yhteiseksi järjestelmäksi.

Lisäksi tämä artikkeli sisältää ennätysmäärän kuvituksia koko ”Oppikirjan” joukossa :-)

CSS:n "float"-ominaisuuden kohtalo on hieman samanlainen kuin HTML:n "table"-tunnisteen kohtalo: kumpikaan ei ollut tarkoitettu sarakkeiden luomiseen ja elementtien yleiseen asettamiseen. Kuitenkin tiettyjen asemointimekanismin epätäydellisyyksien vuoksi kelluketta käytetään tähän tarkoitukseen hyvin laajasti. Ja se, että se on keksitty jollekin toiselle, ilmenee usein erilaisina ei-ilmeisinä vaikutuksina. Ennen kuin näytän niitä, kerron kuitenkin kuinka kelluu Voi käyttää asettelussa.

Heti alussa - pieni huomautus termeistä. Tälle instrumentille ei ole tunnettua termiä venäjän kielellä (ainakaan toistaiseksi). Siksi kirjoitan sen mieluummin alkuperäisellä kirjoitusasullaan - "kelluke". Se kuuluu karkeasti kuin "float" (ei tarvitse rikkoa poskipäitä lausumalla "float"). Samalla pyydän sinua välittömästi antamaan minulle anteeksi sellaiset vapaudet kuin "kelluke", "kelluke" jne. :-)

Toimintaperiaate

Kuten paikannusta, kelluketta käytetään laatikoiden siirtämiseen. Mutta toisin kuin asemointi, jota voidaan käyttää laatikoiden siirtämiseen lähes mielivaltaisesti, kelluke voi vain siirtää elementin virran toiselle puolelle, oikealle tai vasemmalle.

Samanaikaisesti itse laatikko ja sitä seuraavat virrassa saavat mielenkiintoisen käyttäytymisen:

1. Kelluva laatikko liikkuu vaakatasossa ja kiinnittyy vanhemman toiselle sivulle.
2. Kelluva laatikko lakkaa leviämästä pääsäiliölaatikon koko leveydelle (kuten virran lohkojen kanssa). Sen vapaalle puolelle ilmestyy vapaata tilaa, jota ei paineta emolaatikkoa vasten.
3. Hänen perässään lohko laatikot vedetään ylös ja asettuvat paikalleen, ikään kuin kelluva laatikko ei olisi virrassa.
4. Pienet kirjaimet ylöspäin siirtyneet lohkojen sisällä olevat laatikot alkavat virrata kellukelaatikon ympäri vapaalta puolelta.

Haluaisin vielä kerran korostaa jotain, mikä ei ole heti ilmeinen: kelluketta seuraavan lohkon laatikko itse ryömi sen alle ja vie koko virran leveyden, mutta tämän lohkon sisällä oleva teksti siirtyy sivuun ja virtaa ympäriinsä. kelluke.

Seuraavaksi on mielenkiintoista miten kellukelaatikot käyttäytyvät yhteen suuntaan, peräkkäin. Tässä tapauksessa seuraava laatikko yrittää mahtua edellisen kylkeen, sen vapaalle puolelle. Ja vain jos ei ole tarpeeksi tilaa se siirtyy alemmas ja yrittää jo mahtua sinne.

On vielä yksi pieni tekninen näkökohta, joka ei ole välttämätön kaikkien "mekaniikan" ymmärtämiseksi. Voit kelluttaa sekä lohko- että viivalaatikoita, jolloin viivalaatikot muuttuvat välittömästi automaattisesti lohkolaatikoiksi, eli näyttö: block; floatille on tarpeeton.

Kellukkeiden kahdesta kuvatusta ominaisuudesta - reunaan puristaminen ja toistensa sivuille kiinnittäminen - niille ilmenee kaksi pääkäyttöä asettelussa:

• jakaa sivu sarakkeisiin
• vaakasuuntaiset valikot

Sarakkeet

Sarakkeet ovat, kun tekstilohkot sijoitetaan vierekkäin ja ovat samalla korkeudella.

Harkitsen kaikkia sarakeasetteluja käyttämällä tätä yksinkertaista HTML-koodia kahdella lohkolla:

Kannattaa heti sanoa, että sarakkeiden tekeminen poikki leveästi ulottuvaan säiliöön on vaikeampaa kuin tietynleveisten sarakkeiden tekeminen. On olemassa kaksi pohjimmiltaan erilaista lähestymistapaa, jotka sopivat eri tapauksiin.

Suhteellinen leveys

Jos haluat sarakkeiden leveyden muuttuvan suhteessa sivun leveyden muuttuessa, lähestymistapa on seuraava:

#sisältö ( kellua:oikea; leveys:70%; ) #sivupalkki ( float:vasen; leveys:30%; )

Eli kaksi kelluvaa lohkoa asetetaan vierekkäin eri suuntiin ja niiden leveys jaetaan haluttuun prosenttiosuuteen. Tällä menetelmällä voit helposti vaihtaa sarakkeita - yksinkertaisesti muuttamalla oikean ja vasemman arvoja.

Vain yhtä saraketta venytetään

Jos sinun on muutettava vain pääsarakkeen leveyttä, edellinen menetelmä ei sovellu. Tosiasia on, että CSS:ssä se on valitettavasti mahdotonta suoraan muotoile sellainen asia kuin "koko käytettävissä oleva leveys miinus tietty numero".

Siirrytään nyt yhteen aiemmista artikkeleista streamin lohkoista, jossa mainitsin yhden niiden hyödyllisistä ominaisuuksista: sovittaa automaattisesti leveyden ylätason laatikon kokoon. Eli jos eteenpäinvirtauksen lohkolle annetaan esimerkiksi vasen marginaali, sen leveys pienenee vastaavasti. Ja tämä on juuri se käyttäytyminen, jonka halusimme saavuttaa yhdestä sarakkeesta.

Joten tarvitsemamme tehosteen saavuttamiseksi annamme päälohkolle vasemman marginaalin, jotta se kutistuu oikealle, ja kellutamme sivupalkkia tässä paikassa:

#sivupalkki ( float:vasen; leveys: 200px; ) #content (marginaali-vasen:200px; )

Mutta toisella menetelmällä on yksi erittäin vakava haittapuoli. Huomaa, että alkuperäisessä HTML:ssä "sivupalkki" menee ennen estä "sisältö" pääsisällöllä. Älä usko, että tämä tapahtui vahingossa :-). Tämä tehtiin tarkoituksella, koska muuten tämä aivan toinen tapa, jossa sarake asetetaan marginaalin päälle, ei toimisi.

Kuten artikkelin alussa kirjoitin, kellukkeet liikkuvat vain sivulle ja tekevät tilaa seuraaville lohkoille, jotka liikkuvat ylöspäin, joten on tärkeää, että "sivupalkki" on jo ylhäällä, jolloin päälohko tulee Jos "sivupalkki" tulee päälohkon jälkeen, se pysyy alempana, eikä se näytä miltään sarakkeelta.

Tämä on todella huonoa, koska se kumoaa yhden CSS:n pääajatuksista: suunnittelun erottamisen sisällöstä. Kävi ilmi, että halusimme vain muuttaa suunnittelua, ja jos lohkot sijaitsevat "väärin", meidän on myös mentävä HTML-malleihin. Lisäksi rakenteellisesta näkökulmasta voi olla hyviä syitä järjestää lohkoja tavalla eikä toisin. Esimerkiksi, jotta käyttäjä voi aloittaa sivun päätekstin lukemisen odottamatta navigoinnin latautumista.

Kiinteä leveys

Kaikesta tulee dramaattisesti yksinkertaisempaa, kun sarakkeet mahtuvat kiinteään kontin leveyteen. Tässä tapauksessa on parasta käyttää ensimmäistä menetelmää (kelluttaa kaikki sarakkeet), ja leveys voidaan jo asettaa paitsi prosentteina, myös haluamallasi tavalla, koska se voidaan laskea tarkasti.

Kaiuttimen korkeus

Ei taaskaan sattumalta "leikkasin" kuvien lohkojen alaosaa :-). Muuten ne eivät näyttäisi ollenkaan sarakkeilta, koska, kuten voit helposti nähdä, jos käytät toimittamiani CSS-fragmentteja ja maalaat sarakkeet eri väreillä, niiden korkeudet ovat erilaisia. Se riippuu näiden lohkojen sisällön määrästä.

Tämä ruma vaikutus voidaan kiertää useilla tavoilla.

Ensimmäinen menetelmä on nimeltään "Faux columns", joka julkaistiin arvovaltaisessa verkkolehdessä A List Apart syyskuussa 2004 ja siitä on sittemmin tullut erittäin suosittu. Suosittelen kaikkia lukemaan joko alkuperäisen tai venäjänkielisen käännöksen. Jos et kuitenkaan halua napsauttaa tänään, tässä on asian ydin pähkinänkuoressa.

Sen sijaan, että sarakkeille määritettäisiin tausta, ne jätetään läpinäkyviksi, mutta niiden säilölle määritetään taustakuva, joka on koko säilön leveä ja toistuu pystysuunnassa. Tämän kuvan eri pylväiden alla sijaitsevat osat on maalattu eri väreillä ja alaspäin toistettaessa tämä antaa halutun visuaalisen vaikutelman.

Väärissä sarakkeissa on hienoa, että sinun ei tarvitse rajoittua taustaväreihin. Siihen voi esimerkiksi piirtää sarakkeiden väliin varjotehosteen, joka toistaa vaakasuoria raitoja taustana, ja koristeen reunoihin.

Tämän menetelmän haittana on, että koska taustakuvalla on vain yksi koko, sitä ei voida käyttää suhteellisesti venytetyille sarakkeille, koska kuva ei veny. Mutta siinä tapauksessa, että yksi sarakkeista on kiinteä leveys, taustaa voidaan säätää (tätä tapausta ei muuten oteta huomioon "Faux-sarakkeissa").

Ajatuksena on sijoittaa taustakuva vain sen sarakkeen alle, jonka leveys on tiedossa. Loput tilasta on taustalla väri kontti, ei kuva.

Otetaan esimerkkimme ja tehdään oikeanpuoleisesta "sivupalkin" sarakkeesta 200 pikseliä leveä ja annetaan "sisällön" venyä. "Sivupalkkia" varten valmistamme kuvan, jonka mitat ovat 200x1, esimerkiksi tasainen sininen sävy. Ja "sisältö" -kohtaan määritetään kellertävä.

Tyylinä se näyttää tältä:

#sivupalkki ( float:oikea; leveys: 200px; ) #content ( margin-right: 200px; ) body ( background:url(bg.png) #FFD oikea ylhäällä toista-y; )

Ainoa säilön (rungon) sääntö määrittää kaiken taustalla tapahtuvan toiminnan:

• määritä kuvan URL-osoite (bg.png)
• taustaväri paikoissa, joissa sitä ei ole (#FFD)
• kuvan sijainti oikeaan reunaan painettuna (oikea ylhäällä)
• kuvan toistaminen alas (toista-y)

Todellisessa esimerkissä CSS:ssä oli vielä pari sääntöä kirjainten värille ja rajojen valvonnalle, jotka eivät ole nyt relevantteja.

Toinen tapa tasata sarakkeiden korkeus oli Se kuvattiin äskettäin ja on jo hyvin tunnettu, koska se on kätevä.

Ajatuksena on piilottaa sarakkeiden korkeuksien epätasa-arvo laajentamalla niitä uskomattoman paljon alaspäin niin, että niiden päät ovat sivun todellisen sisällön ulkopuolella. Tämä saavutetaan antamalla pilareille ensin erittäin suuri alaspäin pehmuste, joka maalataan päälle taustavärillä. Ja jotta kaikki muu sisältö ei siirry liian pitkälle, sarakkeet määritetään negatiivinen samankokoinen reuna:

Outo luku johtuu siitä, että tämä on enimmäismäärä, jonka Safari-selain voi sallia. Se ei itse asiassa ole niin outoa. Kiinnostuneille tämä on suurin etumerkillinen kokonaisluku, jos sitä edustaa 16 bittiä.

Tämän seurauksena kaikki, mikä seuraa sarakkeita, siirtyy ja sijaitsee suoraan pisimmän sisällön alla, ja sarakkeet ulottuvat alaspäin. Yksi asia on ruma - pitkien sarakkeiden takia itse sivusta tulee yhtä pitkä. Tämän torjumiseksi sinun on määritettävä ylivuoto:hidden-ominaisuus heidän säiliölleen, mikä pakottaa säiliön yksinkertaisesti katkaisemaan ja olemaan näyttämättä, mikä ylittää sen rajojen.

Esimerkilläni, jonka otin heti alussa, on kuitenkin yksi saalis. Siellä sarakkeet sijaitsevat suoraan rungossa. Ja jos body-asetuksena on overflow:hidden , selaimet peruuttavat sivun vierityksen kokonaan. Vaikka todellinen sisältö on ikkunan yläpuolella. Siksi sarakkeet on käärittävä toiseen elementtiin, esimerkiksi div. Mutta rehellisyyden nimissä on sanottava, että käytännössä kaiuttimet on jo kääritty johonkin.

Väijytys

Missä olisimme ilman häntä :-). Kuten en erityisen läpinäkyvästi vihjannut heti alussa, koska kellukkeita ei keksitty pylväiden luomiseen, tästä tulee varmasti jotain rumaa ja tulee takaisin kummittelemaan analginin kulutuksen lisääntyessä (jotkut pitävät tempalginista tai parasetamolista ).

Lisäksi se "tulee ulos" - kirjaimellisessa mielessä. Siirretään "paljas" esimerkkiämme hieman kohti todellisuutta lisäämällä sarakkeiden yläpuolelle otsikko ja alle tekstilohko.

Yksinkertaisuuden vuoksi valitsemme yksinkertaisen pylväsmallin, jolla on kiinteä leveys. Tehdään ylä- ja alalohkosta sininen valkoisilla kirjaimilla, pääsisältö valkoinen ja lisäsarake myös sininen, mutta hieman vaaleampi. Asetamme sarakkeiden värit "Faux columns" -menetelmällä.

/* Sarakkeen asettelu */ body ( leveys:600px; margin:0 auto; ) #content ( float:left; leveys:450px; ) #sidebar ( float:right; leveys:150px; ) /* Värit */ #main ( background:url(bg.png) oikea ylhäällä toista-y; ) #header, #footer ( tausta:#238; väri:valkoinen; )

Jätin taas pois kaikki sisennykset ja kirjasimet havaitsemisen helpottamiseksi. Lisää testiteksti ja suorita:

Hmm... No, kaiuttimet, yleensä, voidaan jopa nähdä! Et löydä vikaa! Mutta katsotpa sitä miten tahansa, kaikki ei näytä siltä kuin on tarkoitettu, ja voisi jopa sanoa, että kaikki on muuttunut eräänlaiseksi värien ja kirjainten sotkuksi.

Ymmärtääksemme, miksi näin tapahtuu, meidän on muistettava kuvaus kellukkeen toiminnasta. Nimittäin, että kellukkeita seuraavat lohkot lakkaavat huomaamasta näitä kellukkeita ja vedetään ylös. Lisäksi itse säiliö, jossa kellukkeet sijaitsevat, lakkaa myös huomaamasta niitä ja kellukkeet putoavat säiliön pohjan läpi, jos se päättyy aikaisemmin.

Katsotaanpa nyt koodiamme. Sekä kelluvat lohkot "content" ja "sidebar" ovat lohkon "main" sisällä. Eikä "main" -osassa ole mitään muuta. Ja koska siinä ei ole muuta sisältöä, sen korkeus romahtaa nollaan! Siksi ei ainuttakaan valkoista näkyy kuvassa "sisällön" tausta, eikä vaaleansininen "sivupalkin" tausta, koska nämä värit on määritetty "päätaustaksi".

Seuraava - "alatunniste". Saman säännön mukaisesti se ei myöskään näe kelluvia lohkoja ja se vedetään suoraan ylätunnisteeseen (koska "main" on nollakorkuinen). Mutta "alatunnisteessa" on tekstiä. Tämän tekstin pitäisi jo virrata kelluu: oikealla "sisältö" ja vasemmalla "sivupalkki". Sarakkeiden välissä ei ole tilaa, joten teksti voi alkaa vain yhden sarakkeen alta, joka päättyy ensin. Siinä hän on. Siten otsikon alle vedetty "alatunniste" jatkaa alaspäin, kunnes kaikki sen teksti on valmis. Ja kaikki tämä otsikon alla oleva sininen tausta on "alatunniste".

Miksi tällainen monimutkaisuus?

Kuvatun käytöksen pitäisi olla hämmentävää. Miksi piti keksiä tällaisia ​​komplikaatioita: jakaa lohkon käsite niin, että värit ja kehykset ovat päällä ja teksti paikallaan? Mutta toki siinä on perää. Tämä yhdessä reunojen kutistamisen kanssa on yritys saada CSS-laatikkomalli käyttäytymään normaalisti yksinkertaisen tekstivirran edessä. Yksityiskohtaisen klassisen selityksen tälle ilmiölle tarjoaa sama Eric Meyer artikkelissa "Containing Floats" (englanniksi). Yritän kertoa lyhyesti olemuksen.

Kuvittele säännöllinen kappaleiden virtaus - tekstilohkoja - ilman sijoittelua. Yhdessä kappaleessa on kuva, jota haluat siirtää esimerkiksi vasemmalle, jotta teksti virtaa sen ympäri. Tämä saavutettiin aiemmin HTML:ssä align="left"-ominaisuuden avulla, mutta tyylin siirtämisen hengessä HTML:stä tyyleihin, Kelluva ominaisuus keksittiin tätä toimintoa varten. Toisin sanoen tälle kuvalle on määritetty tasauksen sijaan float:left.

Anna siirrettävän kuvan olla enemmän korkeudella kuin kappaleen tekstin. Jos hän venyttää kappaleensa ja työntää seuraavan alun alaspäin, se näyttää rumalta viereisten kappaleiden rivien välisen lisääntyneen tilan vuoksi. Siksi se putoaa kaikkien lohkojen rajojen läpi säilyttäen kauniit sisennykset niiden välissä ja teksti virtaa sen ympäri.

Ratkaisut

Joten uppoaminen on ymmärrettävää, mutta se on kätevä sijoittamattomalle tekstille ja täysin hankala asetteluille. On olemassa kaksi lähestymistapaa, jotka eliminoivat tämän ominaisuuden molemmat ilmentymät: seuraavien laatikoiden vetäminen ylös ja säiliön pohjan läpi putoaminen.

Lohkojen vetämisen poistamiseksi on olemassa erityinen ominaisuus - selkeä . Se pakottaa elementin liikkumaan alas, kunnes sen kyljelle ei jää kellukkeita. Lisäksi voit hallita, kummalla puolella ei saa olla kellukkeita:

Clear:left varmistaa, että vasemmalla ei ole kellukkeita Clear:right varmistaa, että oikealla ei ole kellukkeita Clear:molemmat varmistavat, ettei kelluja ole molemmilla puolilla

Joten jos kerromme "alatunnisteellemme":

#footer ( selkeä:molemmat; )

Jotta sen vasemmalla ja oikealla puolella ei ole kelluvia sarakkeita, se siirtyy alas juuri siihen, mihin ne molemmat päättyvät.

Mutta tämä ei ratkaise toista ongelmaa: se, että kellukkeet putoavat "pään" läpi ja se romahtaa, minkä seurauksena sille määrätty sarakkeen tausta ei näy. Epäonnistuminen voidaan voittaa kahdella tavalla.

Voit sijoittaa säiliön selvästi jollakin tavalla. Sikäli kuin ymmärrän määrittelyn logiikan, epäonnistunutta käyttäytymistä pidetään loogisena vain yksinkertaisessa säikeessä. Muissa tapauksissa se vain häiritsee. Ja niin se on, kuten olemme nähneet. Eli riittää, että määrität säilölle esimerkiksi position:absolute tai float:left ja mikään ei epäonnistu, kontti sulkee kokonaan sekä tekstin että kelluvat. Meidän tapauksessamme (ja useimmissa tapauksissa muuten) tämä ratkaisu on varsin sopiva.

Toinen mielenkiintoinen tekniikka sisältää ylivuotoominaisuuden sivuvaikutuksen. Sinänsä sen on tarkoitus määrittää, kuinka säiliö käyttäytyy, kun se vuotaa yli eikä voi sisältää sisältöään. Sillä on neljä merkitystä:

Näkyvä sisältö menee reunan yli ja on normaalisti näkyvissä (tämä on oletuskäyttäytyminen) piilotettu sisältö leikataan pois säilön rajojen ulkopuolella eikä näy siellä millään tavalla automaattisesti jos sisältö vuotaa säilön yli, siinä on vierityspalkki, joka mahdollistaa voit selata sisältöä, jos ei, vieritys ei näytä samanlaiselta kuin auto , vain säilössä on aina vierityspalkki, vaikka sisältö ei ylitä sitä

Sivuvaikutuksena on siis se, että jos säiliölle annetaan ylivuotoa, paitsi tavallista näkyvää, se yhtäkkiä venyy ja sulkee sisäänsä kellukkeet, mikä eliminoi ylivuodon.

Mitä ylivuotoa käyttää? Vieritys katoaa välittömästi - aina roikkuvia vierityspalkkeja ei selvästikään tarvita. Jäljelle jää automaattinen ja piilotettu , jotka eroavat toisistaan ​​vain siinä, näkyykö vierityspalkki, kun se ylittää vai ei. Mutta meillä ei ole ylivuotoa, päinvastoin, tällä ominaisuudella saimme säiliön laajenemaan edelleen niin, että se peittää kaikki elementtinsä. Siksi mitä tahansa arvoa voidaan käyttää.

Yritän taikauskoisesti käyttää piilotettua, jotta vierityspalkit eivät tule näkyviin, jos ylivuoto tapahtuu yhtäkkiä joidenkin häiriöiden takia.

Ylivuotoratkaisussa on yksi kiinnitys, joka liittyy Some Browser™:n toimintaan. Se toimii vain, jos säiliölle on nimenomaisesti määritetty leveys tai korkeus. Tämän vuoksi sitä voi joskus olla hankala käyttää, kun tarvitset automaattisia kokoja jäykkien kokojen sijaan.

Joten loppujen lopuksi, jotta voimme korjata esimerkkimme sarakkeilla, meidän on tehtävä tämä:

#main (leveys:100%; ylivuoto:piilotettu; )

Muuten! Jos taustan piirtämiseen sarakkeiden alle en käyttänyt keinotekoisia sarakkeita, vaan menetelmää pitkällä pehmusteella, niin se vaati käytä overflow:hidden:tä "main", mikä ratkaisee myös putoamisongelman. Mutta miten puhuisin siitä sitten?

Siinä se kaiuttimille... Aika mennä kaatamaan itsellesi herkullista teetä (monet ihmiset pitävät kahvista) ja lisäämällä siihen maukasta pullaa, pitää tauko selvittääksesi kaikki tämä sotku päässäsi. Seuraavaksi meillä on pieni lisäys - menusta.

Valikko

Haluan muistuttaa, että jos useita peräkkäisiä lohkoja kellutetaan yhteen suuntaan, jokainen seuraava yrittää laajentaa edellisen vapaalla puolella.Tätä tehostetta käytetään laajalti muuttamaan verkkosivustojen osioiden luettelot vaakasuuntaisiksi valikoiksi.

Otetaan tämä lista:

• alkaa
• Luettelo
• Kori
• Viite

Jotta se näyttäisi valikolta, sinun on kellutettava kaikki li-kirjaimet vasemmalle, poistettava luettelon attribuutit (sisennykset ja luettelomerkit) ja lisättävä myös sisennykset, tausta ja kehys kauneuden vuoksi:

/* asettelu */ ul, li ( float:left; list-style:none; margin:0; padding:0; ) /* view */ li ( padding:2px 10px; font:Bold Small Tahoma; background:#35C ; väri:valkoinen; reunus: kiinteä 1px; reunusväri:#46F #238 #238 #46F; ) a ( väri:valkoinen; tekstikoristelu:ei mitään; )

Huomaa, että asettelussa kaikki ominaisuudet on määritetty sekä ul- että li-elementeille. Tämä on kätevää koota yhteen sääntöön, koska:

• float:left tarvitaan luettelon elementeille, jotta ne asetetaan vaakasuoraan, ja itse listalle, jotta elementit eivät putoa sen läpi;
• nollamarginaali ja täyttö eliminoivat oletusarvoisesti selaimet listoille tekemän täytön, mutta ne tekevät sen hyvin eri tavalla, joten on helpompi sanoa "kaikki on nolla" kuin muistaa, mitä millekin elementille pitää laittaa erikseen.

Moraali

Kelluva mekanismi on toinen asettelutyökalu absoluuttisen paikantamisen ohella.

Ne eroavat paremmasta, joten voit jättää elementin virtaan, mikä on erittäin kätevä sarakeasettelussa.

Sen haittoja ovat kuitenkin vähemmän joustavuus, koska elementtejä ei voi siirtää mielivaltaisesti, ja koska sen käyttömahdollisuus voi riippua elementtien järjestyksestä HTML-merkinnässä.

Tämä artikkeli on osa meneillään olevaa sarjaa työnimellä "Oppikirja". Suosittelen, että luet muut artikkelit, jotka löytyvät kategoriasta "Oppikirja", jossa ne on nyt koottu käänteisessä kronologisessa järjestyksessä.

Attribuutit antavat lisätietoja HTML-elementeistä.

HTML-attribuutit

• HTML-elementeissä voi olla attribuutteja
• Attribuutit tarjoavat Lisäinformaatio elementistä
• Attribuutit on aina määritelty aloitustunniste
• Attribuutit tulevat nimi/arvo-pareina, esimerkiksi: name="arvo"

Attribuuttiesimerkki

Käytä aina lainausmerkkejä attribuuttiarvoilla

Attribuuttien arvot tulee aina laittaa lainausmerkkeihin.

Yleensä käytetään lainausmerkkejä, mutta myös yksittäiset lainausmerkit ovat hyväksyttäviä.

Neuvoja: Joissakin harvinaisissa tilanteissa, kun attribuutin arvo sisältää lainausmerkkejä, on tarpeen käyttää yksittäisiä lainausmerkkejä: name="Ivan "Vano" Petrov"

Attribuuttien nimet ja attribuuttien arvot eivät ole kirjainkoolla.

World Internet Consortium (W3C) suosittelee kuitenkin merkkijonoattribuutteja/attribuuttiarvoja HTML 4:ssä.

(X)HTML:n uudemmat versiot vaativat tekstin sisäisiä määritteitä.

HTML-attribuuttiviittaus

Luettelo kaikista HTML-elementeistä löytyy täältä:

Alla on luettelo attribuuteista, jotka ovat vakiona useimmille HTML-elementeille:

Lisätietoja vakiomääritteistä on täällä.

Kuvaus

Määrittää, kummalle puolelle elementti kohdistetaan, kun muut elementit virtaavat sen ympärillä toisilla puolilla. Kun float-ominaisuuden arvoksi on asetettu none , elementti hahmonnetaan sivulla normaalisti, mutta on sallittua, että yksi rivitystekstirivi voi olla samalla rivillä itse elementin kanssa.

Syntaksi

kellua: vasen | oikea | ei yhtään | periä

Arvot

HTML5 CSS 2.1 IE 9 Cr 15 Op 11 Sa 5 Fx 8

Tämän esimerkin tulos on esitetty kuvassa. 1.

Riisi. 1. Kelluvan ominaisuuden käyttäminen

Objekti malli

document.getElementById("elementID").style.styleFloat

document.getElementById("elementID ").style.cssFloat

Selaimet

Internet Explorer 6:ssa on ongelma, joka koskee vasemman tai oikean täyttöarvon kaksinkertaistamista kelluville elementeille, jotka on sisäkkäin ylätason elementtien sisällä. Vanhemman puolen vieressä oleva marginaali kaksinkertaistuu. Ongelma ratkaistaan ​​yleensä lisäämällä kelluvaan elementtiin display: inline. Tämä selain lisää myös 3px-täytön (ns. "kolmen pikselin virhe") kelluvan arvon määrittelemään suuntaan.

Internet Explorerin versiot 7.0:aan asti eivät tue periytymisarvoa.

Määrittää, kummalle puolelle elementti kohdistetaan, kun muut elementit virtaavat sen ympärillä toisilla puolilla. Kun float-asetuksena on none , elementti hahmonnetaan sivulla normaalisti, ja enintään yksi rivi rivitystekstiä sallitaan samalla rivillä kuin itse elementti.

Syntaksi

kellua: vasen | oikea | ei mitään

Argumentit

Objekti malli

document.getElementById("elementID").style.styleFloat

Muotoilu