Jos olet kiinnostunut oppimaan kuvan kelluttamisen tekstin oikealle puolelle, se on melko yksinkertainen tehtävä. On monia tilanteita, joissa ohjelmoijat haluavat, että verkkosivulla oleva kuva näkyy tekstin sisällä tekstin virratessa tai kääritty sen ympärille. Kuvien käsittely on samanlainen kuin tekstin käsittely, joten jos sinulla on kokemusta jälkimmäisestä, tämän prosessin ei pitäisi olla ollenkaan vaikea.
Itse asiassa CSS float -ominaisuuden avulla on helppo kelluttaa kuva tekstin oikealle puolelle ja saada teksti virtaamaan sen ympärille vasen puoli. Käytä tätä viiden minuutin opetusohjelmaa oppiaksesi miten.
Asettelu asettelu Float
Tämä perusasettelu luo tilaa tekstillesi ja kelluttaa kuvan tekstin oikealla puolella. Nämä asettelut voivat tietysti mutkistaa, mutta tämä esimerkki näyttää sinulle float- ja tekstityöskentelyn perusperiaatteet.
Olettaen, että sinulla on jo HTML-asiakirja, jonka kanssa työskentelet, ja erillinen CSS-tyylitaulukko, aloita luomalla uusi div toimimaan rivinä, joka sisältää kelluvan elementin.
Anna uudelle div: lle kaksi luokkaa, container ja clearfix. On paljon tapoja käsitellä tätä, ja nimet ovat täysin sinun valintasi, mutta nämä auttavat sinua pysymään järjestyksessä ja luomaan asettelun.
-
Määritä CSS: ssä, miten haluat säilön sovittuvan yleiseen asetteluun. Tämä esimerkki tekee siitä vain täyden leveyden rivin.
.container {
leveys: 100%;
korkeus: 25rem;
} -
Seuraavaksi pidä huolta clearfix-luokasta. Selkeä korjaus on välttämätön, koska uimuri voi luoda asetteluun parittomia vikoja. "Ylivuoto" -ominaisuuden määritteleminen clearfix-korjauksessa estää kelluvien elementtien vuotamisen ulos niille tarkoitetusta tilasta.
.clearfix {
ylivuoto: auto;
} -
Nyt voit luoda elementin konttiosastoon ja kelluttaa sen oikealle. Jos käärit tekstiä kuvan ympärille, tämä olisi sinun kuvasi. Luo elementti ja anna sille float-ominaisuuden luokka.
-
Luo luokka floatille. Luultavasti haluat heittää myös muotoilun sinne, jos teet enemmän identtisiä elementtejä. Muussa tapauksessa voit käyttää erillistä luokkaa tyylisi suhteen.
.float-right {
kellua: oikea;
leveys: 300px;
korkeus: 200px;
taustaväri: punainen;
marginaali: 0 0 0,5rem 0,5rem
} -
Jos haluat kietoa tekstiä kelluvan elementin ympärille, lisää teksti nyt. Laita se mihin tahansa astiaan joko ennen kellunutta elementtiä tai sen jälkeen.
Jotkut tekstistä
Lisää tekstiä
...ja niin edelleen.
-
Päivitä sivu ja tarkista tulos.
Käärimistä
Ja se tekee sen. Nyt näet, että kuvan kelluttaminen oikealle ei ole ollenkaan vaikeaa. Saatat myös olla kiinnostunut kelluttamalla kuvaa vasemmalle ja kelluttamalla sitä keskelle. Vaikka ensimmäinen siirto on mahdollinen, valitettavasti et voi kellua kuvan keskelle, koska se edellyttäisi yleensä kahden sarakkeen asettelua.