CSS float -ominaisuuden käyttäminen Web-sivuasettelujen suunnitteluun
CSS-ominaisuus on erittäin tärkeä asettelu ominaisuudelle. Sen avulla voit sijoittaa Web-sivusi malleja juuri niin kuin haluat niiden näyttämisen. Jotta voit käyttää sitä, sinun on ymmärrettävä, miten se toimii.
Tyylitiedostossa CSS float -ominaisuus näyttää tältä:
Oikein {float: oikea; }
Tämä kertoo selaimelle, että kaikki "oikean" luokan kanssa kelluu oikealle.
Voit määrittää sen seuraavasti:
class = "oikea" />
Mitä voit uida CSS-float-ominaisuuden kanssa?
Et voi floattaa kaikkia elementtejä web-sivulla. Voit floattaa vain lohkotason elementtejä. Nämä ovat elementtejä, jotka vievät sivun välilyönnin, kuten kuviin (), kappaleisiin (), divisioihin () ja luetteloihin ().
Muita tekijöitä, jotka vaikuttavat tekstiin, mutta eivät luo laatikkoa sivulle, kutsutaan inline-elementteiksi, eikä niitä voi leijua. Nämä ovat elementtejä, kuten span (), line breaks (), strong emphasis () tai kursiivi ().
Missä he float?
Voit flooida elementtejä oikealle tai vasemmalle. Jokainen elementti, joka seuraa kelluva elementti, kulkee kelluvan elementin ympärillä toisella puolella.
Jos esimerkiksi kelluva kuva vasemmalle, kaikki sen jäljessä olevat tekstit tai muut elementit kulkevat sen ympärillä oikealle. Ja jos kellan kuvan oikealle, kaikki sen jäljessä olevat tekstit tai muut elementit virtaavat sen vasemmalle puolelle. Kuva, joka sijoitetaan tekstilohkoon ilman mitään float-tyyliä, näyttää kuitenkin, että selain on asetettu näyttämään kuvia.
Tämä on yleensä seuraavan tekstin ensimmäisellä rivillä, joka näkyy kuvan alareunassa.
Kuinka kauas he Float?
Floated-elementti liikkuu niin pitkälle kuin säiliöelementin vasemmalle tai oikealle puolelle. Tämä johtaa useisiin eri tilanteisiin riippuen siitä, miten koodisi on kirjoitettu.
Näissä esimerkeissä kellan pieni DIV-elementti vasemmalle:
- Jos kelluvalle elementille ei ole ennalta määriteltyä leveyttä, se vie niin paljon vaakasuuntaista tilaa kuin on tarpeen ja käytettävissä riippumatta floatista. Huomaa: jotkut selaimet yrittävät sijoittaa elementtejä float-elementtien vieressä, kun leveyttä ei ole määritetty - yleensä antaa ei-float-elementille vain pieni määrä tilaa. Joten sinun pitäisi aina määritellä leveys kelluvilla elementeillä.
- Jos konttielementti on HTML-elementti, kelluva DIV istuu sivun vasemmalla reunalla.
- Jos säiliöelementti itsessään on jotain muuta, kelluva DIV istuu kontin vasemmalla reunalla.
- Voit pesata kelluvia elementtejä, ja se voi johtaa siihen, että kellunta päätyy yllättävään paikkaan. Esimerkiksi tämä float on vasen kelluva DIV oikealla kelluvassa DIV: ssä.
- Kelluvat elementit istuvat vierekkäin, jos säiliössä on tilaa. Esimerkiksi tämä säiliöllä on kolme 100px leveää DIV-elementtiä kelluva 400px leveä säiliö.
Voit myös käyttää kellukkeita luomalla valokuvagalleria. Teet jokaisen pikkukuvan (se toimii parhaiten, kun ne ovat kaikki samankokoiset) DIV: ssä otsikolla ja kellukaa DIV-elementit säiliössä.
Riippumatta siitä, kuinka leveä selainikkuna on, pikkukuvat kokoavat tasaisesti.
Floatin sammuttaminen
Kun tiedät, miten saat elementin kellumaan, on tärkeää tietää, kuinka sammuttaa float. Kytke float pois päältä CSS-selkeällä ominaisuudella. Voit tyhjentää vasemmat kelluvat, oikeat kelluvat tai molemmat:
kirkas: vasen;
selvä: oikea;
Tyhjennä molemmat;
Jokainen elementti, jonka asetat selkeän omaisuuden , näkyy elementin alle, joka kelluu kyseiseen suuntaan. Esimerkiksi tässä esimerkissä kaksi ensimmäistä tekstiä ei ole poistettu, mutta kolmas on.
Toista asiakirjojen eri elementtien selkeä arvo, jotta saat erilaiset ulkoasun vaikutukset.
Yksi mielenkiintoisimmista kelluvista asennoista on sarja kuvia oikealla tai vasemmalla sarakkeessa tekstin kohtien vieressä. Vaikka teksti ei ole riittävän pitkä, jotta voit selata kuvaa ohi, voit käyttää selkeää kuvaa kaikissa kuvissa varmistaaksesi, että ne näkyvät sarakkeessa pikemminkin kuin edellisen kuvan vieressä.
HTML (toista tämä kohta):
Tarvittavat toimenpiteet eivät ole välttämättömiä tulipalossa, kun halutaan paljastaa. Cupidatat ei ole taipuvainen, labore et dolore magna aliqua.
CSS (kelluvat kuvat vasemmalle):
img.float {float: vasen;
selvä: left;
margin: 5px;
}
Ja oikealle:
img.float {float: oikea;
selvä: oikea;
margin: 5px;
}
Floats for Layout -ohjelman käyttäminen
Kun ymmärrät float-ominaisuuden toimivuuden, voit aloittaa sen käytön verkkosivujen määrittämiseksi. Nämä ovat askeleita, joiden avulla voin luoda kelluvan verkkosivun:
- Suunnittele ulkoasu (paperilla, grafiikkatyökalulla tai pääni).
- Määritä, mistä sivujaot ovat.
- Määritä eri säiliöiden leveydet ja niiden sisällä olevat elementit.
- Float kaikki. Jopa uloimpi säiliöelementti kelluu vasemmalle niin, että tiedän, missä se on suhteessa selainnäkymän porttiin.
Niin kauan kuin tiedät leveytesi (prosenttiosuudet ovat hienoja) asetteluosiosi, voit käyttää float-ominaisuutta laittamalla ne siihen kohtaan, johon ne kuuluvat sivulle. Ja mukava asia on, sinun ei tarvitse huolehtia yhtä paljon siitä, että laatimalli on erilainen Internet Explorerissa tai Firefoxissa.