Szüksége van a kódra a szöveg köré tekeréséhez? Általában, ha létrehoz egy HTML oldalt, minden folyik lineárisan, vagyis egy blokkot közvetlenül a másik után. Az összes korábbi hozzászólásom egy példa erre, azaz a szöveg, majd a kép, majd a szöveg, stb.
Előfordulhat, Ezt úgy hívják, hogy a képet körbeveszi a kép körül. Ez valójában meglehetősen könnyű szöveget szöveget HTML segítségével. Fontos megjegyezni, hogy nem kell a CSS-t használni a szöveget feldolgozásához.
Napjainkban azonban a W3C javasolja a CSS helyett a HTML ilyen feladatokhoz. Mindkét módszert megemlítem, de ha így van, akkor jobb, ha a CSS-t használja, mivel jobban alkalmazkodik a válaszadó weboldalakon.
1
A lámpás pihenés, az elit. Fusce dictum gravida enim, a quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, született ridiculus mus. A felszólalás felszólalása. Curabitur molestie posuere laoreet.
Ahhoz, hogy a szöveg a kép jobb oldalán legyen, a kép balra kell igazítani:
<img itemprop="image" data-original="IMAGE URL" align="left" /><p>Your text goes here.</p>
Ha szeretné, hogy a szöveg balra jelenjen meg, és a kép a jobb szélen jelenjen meg, csak állítsa be az igazítási paramétert "jobbra".
A lámpás pihenés, az elit szenvedélye. Fusce dictum gravida enim, a quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, született ridiculus mus. A felszólalás felszólalása. Curabitur molestie posuere laoreet.
<img itemprop="image" data-original="IMAGE URL" align="right" /><p>Your text goes here.</p>
Ez az! Elég könnyű? Az egyetlen idő, amikor a CSS-t szeretné használni, ha margókat szeretne hozzáadni a képekhez, így van némi tér a szöveg és a kép között.
A kép margóit hozzáadhatja a a CSS stíluskód után:
<img itemprop="image" data-original=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>
A fenti kód a MARGIN CSS elemet használja, hogy a kép jobb oldalán 10 pixelnyi üres területet adjon hozzá. Mivel a bal oldali képet igazítottuk, hozzá szeretnénk adni a jobb margót.
Alapvetően a négy szám TOP RIGHT BOTTOM LEFT. Tehát, ha a jobb oldali képhez szeretné hozzáadni a fehér helyet, akkor ezt teheti:
<img itemprop="image" data-original=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>
Így elég egyszerű a HTML használata a feladat végrehajtásához, de egyszer
Szöveg befedése a képen a képen a CSS használatával
A CSS segítségével jobb módja van a kép körül körbevágásához. Ez finomabb szemcseméretet ad az elemek pozícionálásánál, és jobban működik a modern kódolási szabványokkal.
<img itemprop="image" data-original="IMAGE URL" alt="A photo" class="lazy left" />
Bár a CSS-t közvetlenül a HTML , soha többet soha nem szabad ezt megtennie. Ehelyett egy különálló fájlt kell megadnia, amely egy stíluslapot tartalmaz, amely az összes CSS kódot tartalmazza.
Az IMG tagben egyszerűen hozzárendel egy osztályt a címkéhez, és adjon nevet. Példámban az osztályt balraneveztem el. A stíluslapomban mindössze annyit kell tennie, hogy hozzáadja a következő kódot:
.left {
float: left;
padding: 0 10px 0 0;}
Ahogy láthatja, hozzáadtam a 10 oldalas párnázást a bal oldali kép jobb oldalához . A float tulajdonságot is használtam, hogy a képet a dokumentum normális áramlásából eltávolítsam, és a szülő tartály bal oldalára helyezzük.
Mint láthatja, sokkal tisztább, mint az összes kód hozzáadása magának az IMG tagnak. Az is könnyebb kezelni, és sokkal több CSS-tulajdonságot használhat a weboldal megjelenésének testreszabásához. Ha bármilyen kérdése van, ne habozzon megjegyezni. Enjoy!