Kuidas pilti pildi vasakusse teksti sisestamiseks veebilehel

CSS-i kasutamine pildi joondamiseks veebilehe kujunduse vasakusse serva

Vaadake täna peaaegu kõiki veebisaite ja näete nende lehtede suurema osa moodustavate tekstide ja kujutiste kombinatsiooni. Teksti ja pilte on lehele väga lihtne lisada. Tekst on kodeeritud standardsete HTML-märgenditega, nagu lõigud, loendid ja pealkirjad, samas kui pildid on lisatud elemendi abil .

Võimalus muuta see tekst ja need pildid koos töötada on see, mis seab suurepärased veebidisainerid peale! Te ei soovi lihtsalt, et teie tekst ja pildid kuvataks üksteise järel, see tähendab, et need plokktaseme elemendid asuvad vaikimisi paigutusega. Ei, tahate mõningast kontrolli selle üle, kuidas tekst ja pildid ühinevad, mis lõppkokkuvõttes on teie veebisaidi visuaalne disain.

Selle lehe vasakpoolsel küljel joondatud pilt, kus selle lehe tekst jookseb, on trükitud kujunduse ja ka veebilehtede jaoks ühine kujundus. Veebikõnes on see efekt tuntud kujutise ujuvana . See stiil saavutatakse CSS-i omadustega "ujuk". See omadus võimaldab teksti libistada ümber vasakpoolse joonega pildi paremale küljele. (Või paremal joondatud pildil vasakul küljel.) Vaatame, kuidas seda visuaalset efekti saavutada.

Alusta HTML-st

Esimene asi, mida peate tegema, on mõne HTML-i töötamine. Näiteks kirjutame teksti lõigu ja lisame lõikepunkti alguses pildi (enne teksti, kuid pärast ava

sildi). Siin on see HTML-märgistus välja näinud:

Lõike tekst läheb siia. Selles näites on meil pilt peaspiltest, nii et see tekst oleks tõenäoliselt inimese kohta, kellele on peamised silmapilgud.

Vaikimisi kuvatakse meie veebileht koos teksti kohal oleva kujutisega. Seda seetõttu, et pildid on HTML-i blokaadi tasemel elemendid. See tähendab, et brauser näitab rea vaheaegu enne ja pärast pildi elementi vaikimisi. Vaatame selle vaikimisi välja, pöördudes CSS-i poole. Esiteks lisame meie pildielemendile klassi väärtuse . See klass toimib kui "konks", mida kasutame hiljem meie CSSis.

Lõike tekst läheb siia. Selles näites on meil pilt peaspiltest, nii et see tekst oleks tõenäoliselt inimese kohta, kellele on peamised silmapilgud.

Pange tähele, et see klass "vasakule" ei tee midagi iseenesest! Meie soovitud stiili saavutamiseks peame järgmisena kasutama CSS-i .

CSS-stiilid

Meie HTML-i sisuga, kaasa arvatud meie vasakpoolse klassi atribuut, saame nüüd pöörduda CSS-i poole. Me lisame reegli meie laaditabeleid , mis hõljuvad seda pilti ja lisavad selle kõrval ka natuke polsterit, nii et tekst, mis lõpuks ümbritseb pilti, ei lähe selle vastu liiga tihedalt. Siin saab kirjutada CSS:

. left {float: vasakule; padding: 0 20px 20px 0; }

See stiil ujutab seda pilti vasakule ja lisab pildi paremasse ja alumisse pistikust (mõne CSS-i stenogrammi kasutades).

Kui vaatate lehte, mis sisaldab seda HTML-i brauseris, siis pilt nüüd vasakule vasakule ja paragrahvi tekst tundub paremale, kui nende kahe vahel on piisavalt ruumi. Pange tähele, et klassi väärtus "vasakul", mida me kasutasime, on meelevaldne. Oleksime võinud seda midagi öelda, sest termin "vasakul" ei tee midagi iseenesest. Sellel peab olema klassi atribuut HTML-is, mis töötab tegelikul CSS-stiilis, mis määrab visuaalsed muudatused, mida otsite teha.

Alternatiivsed võimalused nende stiilide saavutamiseks

Selline lähenemine, mis annab pildielemendile klassi atribuudi ja seejärel kasutatakse üldist CSS-stiili, mis elementi hõljub, on ainult üks viis selle "vasakule joondatud pildi" väljanägemise saavutamiseks. Sa võid ka võtta klassi väärtuse kujutist välja ja stiili seda CSS-iga, kirjutades täpsemat valijat. Näiteks vaatame näiteks sellist nähtust, kus see pilt asub jagunemises, mille klassi väärtus on "põhisisu".