Kas vajate koodi, et teksti ümber pildistada? Tavaliselt HTML-lehekülje loomisel voolab kõik lineaarselt, mis tähendab ühte plokki vahetult teise järel. Kõik minu eelmised postitused on selle näide, nt tekst, pilt, seejärel tekst jne.
Mõnikord võite lisada pildi kõrvale teksti selle asemel, et selle alla jääda. Seda nimetatakse pildi ümber pakendamise tekstiks. Teksti kasutamine HTML-i abil on tegelikult üsna lihtne. Pange tähele, et teksti murdmiseks ei pea te kasutama CSS-i.
Kuid nendel päevadel soovitab W3C kasutada sellist tüüpi ülesannete jaoks HTML-i asemel CSS-i. Ma mainin mõlemat meetodit allpool, aga kui saate, siis on parem kasutada CSS-i, kuna see on paremini kohandatav veebisaitide kujundusele.
Pakkige teksti tekst ümber HTML-i abil
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing sagitsis. 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 non imperdiet enim congue.
Teksti murdmiseks pildi parempoolses servas peate pildi joondama vasakule:
Sinu tekst läheb siia.
Kui soovite, et tekst ilmuks vasakule ja pilt ilmuks paremas servas, vahetage joondamisparameeter lihtsalt paremale.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing sagitsis. 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 non imperdiet enim congue.
Sinu tekst läheb siia.
See on nii! Päris lihtne? Ainuke aeg, mida soovite CSS-i kasutada, on see, kui soovite pilte lisada marginaale, nii et teksti ja pildi vahel on ruumi.
Võite lisada pilte, kasutades järgmist CSS-stiili koodi:
Sinu tekst läheb siia.
Ülaltoodud kood kasutab MARGIN CSS elementi, et lisada pildi paremasse serva 10 pikslit tühikut. Kuna oleme joondanud pildi vasakule, tahame lisada tühimärgi paremale.
Põhimõtteliselt esindavad neli numbrit TOP RIGHT BOTTOM LEFT. Seega, kui soovite lisada tühiku ruumi paremale joondatud pildile, siis teeksite seda:
Sinu tekst läheb siia.
Seega on HTML-i kasutamine selle ülesande täitmiseks üsna lihtne, kuid jällegi ei pruugi see reageerivate saitide puhul hästi toimida.
Pange teksti tekst ümber CSS abil
Parem viis teksti ümber ümbritsemiseks on kasutada CSS-i. See annab teile rohkem peeneteralise kontrolli elementide paiknemise üle ja töötab paremini kaasaegsete kodeerimisstandarditega.
Kuigi olen kaasanud CSS-i otse HTML-i pildimärgisesse, ei tohiks sa seda enam teha. Selle asemel peaksite olema eraldi fail nimega stiilitabel, mis sisaldab kogu teie CSS-koodi.
IMG-siltis saate lihtsalt märgisele klassi määrata ja anda sellele nime. Minu näites nimetasin ma klassi vasakule . Minu stiililehel on vaja ainult lisada järgmine kood:
.left {float: vasakule; polsterdus: 0 10px 0 0;} Nagu näete, lisasin vasakule joondatud pildi paremale küljele 10-kordset polstrit. Ma kasutasin ka ujuki omadust, et liikuda pildi normaalsest dokumendivoolust välja ja panna see algkonteineri vasakule küljele.
Nagu näete, on see palju puhtam kui selle koodi lisamine IMG-sildile. Samuti on lihtsam hallata ja saate oma veebilehe ilme kohandamiseks kasutada palju rohkem CSS-omadusi. Kui teil on küsimusi, kommenteerige seda. Naudi!
