Naudokite CSS „Lygiuoti kairėn“, kad svetainės vaizdas būtų rodomas kairėje teksto dalyje

Bloko lygio elementai tinklalapyje rodomi eilės tvarka. Norėdami pagerinti puslapio išvaizdą ar naudingumą, galite modifikuoti tą tvarką apvyniodami blokus, įskaitant vaizdus, ​​taip aplink vaizdus teka tekstas.

Kalbant apie tinklalapio dizainą, šis efektas yra žinomas kaip paveikslėlio plūduriavimas. Tai pasiekiama naudojant CSS nuosavybėplūdė, kuris leidžia tekstui tekėti aplink kairėje sulygiuotą vaizdą į dešinę pusę (arba aplink dešinėje sulygiuotą vaizdą į kairę pusę).

Pradėkite nuo HTML

Šis pavyzdys prideda vaizdą pastraipos pradžioje (prieš tekstą, bet po atidarymo

žyma). Štai pradinis HTML žymėjimas:

Pastraipos tekstas eina čia. Šiame pavyzdyje mes turime nuotraukos nuotrauką iš nuotraukos, todėl šis tekstas gali apibūdinti asmenį, esantį galvos smūgyje.

Pagal numatytuosius nustatymus puslapis bus rodomas su vaizdu virš teksto, nes vaizdai yra bloko lygio elementai HTML. Tai reiškia, kad naršyklė pagal numatytuosius nustatymus rodo eilutės pertraukas prieš ir po vaizdo elemento. Norėdami pakeisti šią numatytąją išvaizdą naudodami CSS, pridėkite klasės vertę (

paliko) prie vaizdo elemento, kad jis būtų naudojamas kaip kabliukas, prie kurio galima pritvirtinti savybes.

Pastraipos tekstas eina čia. Šiame pavyzdyje mes turime nuotraukos nuotrauką iš nuotraukos, todėl šis tekstas gali apibūdinti asmenį, esantį galvos smūgyje.

Atkreipkite dėmesį, kad ši klasė nieko neveikia pati. CSS pasieks norimą stilių.

CSS stilių pridėjimas

Pridėkite šią taisyklę prie svetainės stiliaus lapas:

.left {
plūdė: kairė;
užpildas: 0 20px 20px 0;
}

Šis stilius skleidžia bet ką su klase paliko puslapio kairėje ir šiek tiek prideda paminkštinimas dešinėje ir apačioje paveikslėlio, kad tekstas neužkliūtų tiesiai prieš jį.

Naršyklėje vaizdas dabar bus sulygiuotas į kairę; tekstas pasirodys dešinėje, tarp jų yra tarpas.

Kiti būdai pasiekti šiuos stilius

Taip pat galite atimti vaizdo vertę nuo vaizdo ir suformuoti ją CSS, parašydami konkretesnį selektorių. Toliau pateiktame pavyzdyje vaizdas yra padalijimo viduje su a Pagrindinis turinys klasės vertė.

Pastraipos tekstas eina čia. Šiame pavyzdyje mes turime nuotraukos nuotrauką iš nuotraukos, todėl šis tekstas gali apibūdinti asmenį, esantį galvos smūgyje.

Norėdami suformuoti šį vaizdą, parašykite šį CSS:

.pagrindinis turinys img { 
plūdė: kairė; 
užpildas: 0 20px 20px 0;
}

Pagal šį scenarijų vaizdas sulygiuotas kairėn, aplink jį plūduriuojantis tekstas kaip ir anksčiau, tačiau be papildomos klasės vertės žymėjime. Tai atlikus masto, galima sukurti mažesnį HTML failą, kurį bus lengviau valdyti ir pagerinti našumą.

Venkite įterptinių stilių

Galiausiai galite naudoti įterpti stiliai:

Pastraipos tekstas eina čia. Šiame pavyzdyje mes turime nuotraukos nuotrauką iš nuotraukos, todėl šis tekstas gali apibūdinti asmenį, esantį galvos smūgyje.

Tačiau tai nepatartina, nes elemento stilius sujungiamas su struktūriniu žymėjimu. Geriausios praktikos nurodo, kad puslapio stilius ir struktūra išlieka atskiri. Šis atskyrimas yra ypač naudingas, kai reikia pakeisti puslapio išdėstymą ir ieškoti skirtingų ekrano dydžių ir įrenginių su reaguojančia svetaine.