Liitä verkkosivustokuva tekstin vasemmalle puolelle CSS-tasaus vasemmalle -toiminnon avulla

Lohkotason elementit verkkosivulla näkyvät järjestyksessä. Voit parantaa sivun ulkonäköä tai hyödyllisyyttä muokkaamalla kyseistä järjestystä käärimällä lohkot, mukaan lukien kuvat, siten teksti kulkee kuvien ympärillä.

Verkkosuunnittelun kannalta tämä vaikutus tunnetaan kuvan kellumisena. Tämä saavutetaan CSS-ominaisuuskellua, joka sallii tekstin virrata vasemmalle tasatun kuvan ympäri sen oikealle puolelle (tai oikealle tasatun kuvan ympärille vasemmalle puolelle).

Aloita HTML: llä

Tämä esimerkki lisää kuvan kappaleen alkuun (ennen tekstiä, mutta avauksen jälkeen

tag). Tässä on alkuperäinen HTML-merkintä:

Kappaleen teksti menee tähän. Tässä esimerkissä meillä on kuva otoskuvasta, joten tämä teksti saattaa kuvata pääkuvassa olevaa henkilöä.

Oletusarvoisesti sivu näytetään kuvan kanssa tekstin yläpuolella, koska kuvat ovat lohkotason elementtejä HTML: ssä. Tämä tarkoittaa, että selain näyttää rivinvaihdot ennen kuvaelementtiä ja sen jälkeen oletuksena. Jos haluat muuttaa tätä oletustyyliä CSS: n avulla, lisää luokan arvo (

vasemmalle) kuva-elementtiin toimimaan koukuna, johon ominaisuudet voidaan kiinnittää.

Kappaleen teksti menee tähän. Tässä esimerkissä meillä on kuva otoskuvasta, joten tämä teksti saattaa kuvata pääkuvassa olevaa henkilöä.

Huomaa, että tämä luokka ei tee mitään yksin. CSS saavuttaa halutun tyylin.

CSS-tyylien lisääminen

Lisää tämä sääntö sivuston sääntöihin tyylitaulukko:

.left {
kellua: vasen;
täyte: 0 20px 20px 0;
}

Tämä tyyli kelluu mitä tahansa luokan kanssa vasemmalle sivun vasemmalle puolelle ja lisää hieman pehmuste kuvan oikealle ja alareunalle, jotta teksti ei törmää sitä vasten.

Selaimessa kuva olisi nyt kohdistettu vasemmalle; teksti näyttäisi oikealla ja väli näiden kahden välillä.

Muita tapoja saavuttaa nämä tyylit

Voit myös poistaa luokan arvon kuvasta ja muotoilla sen CSS: llä kirjoittamalla tarkemman valitsimen. Alla olevassa esimerkissä kuva on jaossa, jossa on a pääsisältö luokan arvo.

Kappaleen teksti menee tähän. Tässä esimerkissä meillä on kuva otoskuvasta, joten tämä teksti saattaa kuvata pääkuvassa olevaa henkilöä.

Tyylittäkää tämä kuva kirjoittamalla tämä CSS:

.main-content img { 
kellua: vasen; 
täyte: 0 20px 20px 0;
}

Tässä skenaariossa kuva kohdistetaan vasemmalle, tekstin kelluvan sen ympärille kuten aiemmin, mutta ilman ylimääräistä luokan arvoa merkinnässä. Tämän tekeminen mittakaavassa voi auttaa luomaan pienemmän HTML-tiedoston, jota on helpompi hallita ja joka voi parantaa suorituskykyä.

Vältä upotettuja tyylejä

Lopuksi voit käyttää inline-tyylit:

Kappaleen teksti menee tähän. Tässä esimerkissä meillä on kuva otoskuvasta, joten tämä teksti saattaa kuvata pääkuvassa olevaa henkilöä.

Tätä ei kuitenkaan suositella, koska se yhdistää elementin tyylin sen rakenteelliseen merkintään. Parhaiden käytäntöjen mukaan sivun tyyli ja rakenne pysyvät erillisinä. Tämä erottelu on erityisen hyödyllistä, kun joudut muuttamaan sivun asettelua ja etsimään erilaisia ​​näytön kokoja ja laitteita reagoivalla verkkosivustolla.