Tarvitsetko koodin tekstin ympärille kuvan ympärille? Yleensä kun luot HTML-sivun, kaikki virtaa lineaarisesti, mikä tarkoittaa yhtä lohkoa suoraan toisensa jälkeen. Kaikki aiemmat viestini ovat esimerkki tästä, eli teksti, kuva, sitten teksti jne.
Joskus haluat ehkä lisätä kuvan vieressä olevaa tekstiä sen alle. Tätä kutsutaan kuvan ympärillä olevaksi kääritystekstiksi. Tekstin käämitys HTML: n avulla on melko helppoa. Huomaa, että sinun ei tarvitse käyttää CSS: ää tekstin käärimistä varten.
W3C suosittelee kuitenkin näinä päivinä CSS: n käyttämistä HTML: n sijaan tällaisiin tehtäviin. Mainitsen molemmat alla olevat menetelmät, mutta jos voit, on parempi käyttää CSS: ää, koska se on paremmin mukautettavissa verkkosivujen suunnitteluun.
Kierrä tekstiä ympäri kuvaa käyttämällä HTML-koodia
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas en imperdiet enim congue.
Jotta teksti kääriisi kuvan oikealle puolelle, sinun on kohdistettava kuva vasemmalle:
Teksti menee täällä.
Jos haluat, että teksti ilmestyy vasemmalle ja kuva näkyy oikeassa reunassa, muuta kohdistusparametri "oikealle".
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas en imperdiet enim congue.
Teksti menee täällä.
Se siitä! Melko helppoa? Ainoa kerta, kun haluat käyttää CSS: ää, on, jos haluat lisätä marginaaleja kuviin, niin että tekstin ja kuvan välillä on jonkin verran tilaa.
Voit lisätä kuvan reunuksia käyttämällä seuraavaa CSS-muotoilukoodia:
Teksti menee täällä.
Yllä oleva koodi käyttää MARGIN CSS -elementtiä lisäämään 10 pikseliä tyhjää tilaa kuvan oikealle puolelle. Koska olemme kohdistaneet kuvan vasemmalle, haluamme lisätä välilyönnin oikealle.
Periaatteessa nämä neljä numeroa edustavat TOP RIGHT BOTTOM LEFT. Jos haluat lisätä valkoisen tilan oikeanpuoleiseen kuvaan, voit tehdä tämän:
Teksti menee täällä.
Joten on melko yksinkertaista käyttää HTML: ää tämän tehtävän suorittamiseen, mutta jälleen kerran se ei ehkä toimi hyvin vastaaville sivustoille.
Kierrä tekstiä ympäri kuvaa käyttäen CSS: ää
Parempi tapa tekstin kiertämiseksi kuvan ympärille on käyttää CSS: ää. Se antaa sinulle enemmän hienojakoista viljelyä elementtien sijainnin suhteen ja toimii paremmin nykyaikaisilla koodausstandardeilla.
Vaikka sisällytin CSS: n suoraan HTML-esimerkin kuvamerkkiin, sinun ei pitäisi koskaan tehdä sitä enää. Sen sijaan sinun pitäisi olla erillinen tiedosto, jota kutsutaan tyylitaulukoksi, joka sisältää kaikki CSS-koodisi.
IMG-tunnisteessa voit vain määrittää tunnisteen luokalle ja antaa sille nimen. Minun esimerkissäni nimensin luokan vasemmalle . Tyyliluettelossa on vain lisättävä seuraava koodi:
.left {float: vasen; pehmuste: 0 10px 0 0;} Kuten näette, lisäsin 10px pehmustetta vasemmanpuoleisen kuvan oikealle puolelle. Käytin myös float-ominaisuutta siirtämään kuvaa dokumentin normaalista virtauksesta ja asettamaan sen vanhemman säiliön vasemmalle puolelle.
Kuten näette, se on paljon puhtaampaa kuin koko koodin lisääminen IMG-tunnisteeseen. Se on myös helpompi hallita, ja voit käyttää paljon enemmän CSS-ominaisuuksia muokata verkkosivun ulkoasua. Jos sinulla on kysyttävää, voit kommentoida. Nauttia!
