Izmantojiet CSS Izlīdzināt pa kreisi, lai vietnes attēls būtu pa kreisi no teksta

Bloka līmeņa elementi tīmekļa lapā parādās secīgā secībā. Lai uzlabotu lapas izskatu vai lietderību, varat modificēt šo secību, iesaiņojot blokus, ieskaitot attēlus, tā teksts plūst ap attēliem.

Tīmekļa dizaina izteiksmē šis efekts ir pazīstams kā attēla peldēšana. Tas tiek panākts ar CSS īpašumspeldēt, kas ļauj tekstam plūst pa kreisi līdzinātu attēlu tā labajā pusē (vai ap labo pusi izlīdzinātu attēlu uz kreiso pusi).

Sāciet ar HTML

Šis piemērs pievieno punktu rindkopas sākumā (pirms teksta, bet pēc atvēršanas

tagu). Šis ir sākotnējais HTML marķējums:

Rindkopas teksts ir šeit. Šajā piemērā mums ir fotoattēls ar galvu šāvienu, tāpēc šis teksts var raksturot personu, kas atrodas galvas šāvienā.

Pēc noklusējuma lapa tiktu parādīta ar attēlu virs teksta, jo attēli ir bloka līmeņa elementi HTML. Tas nozīmē, ka pārlūks pēc noklusējuma parāda rindas pārtraukumus pirms un pēc attēla elementa. Lai mainītu šo noklusējuma izskatu, izmantojot CSS, pievienojiet klases vērtību (pa kreisi) pie attēla elementa, lai kalpotu kā āķis, pie kura var piestiprināt īpašības.

Rindkopas teksts ir šeit. Šajā piemērā mums ir fotoattēls ar galvu šāvienu, tāpēc šis teksts var raksturot personu, kas atrodas galvas šāvienā.

Ņemiet vērā, ka šī klase neko nedara pati. CSS sasniegs vēlamo stilu.

CSS stilu pievienošana

Pievienojiet šo kārtulu vietnes noteikumiem stila lapa:

.left {
pludiņš: pa kreisi;
polsterējums: 0 20px 20px 0;
}

Šis stils peld ar klasi jebko pa kreisi lapas kreisajā pusē un nedaudz papildina polsterējums attēla labajā un apakšējā malā, lai teksts netiktu sasists tieši pret to.

Pārlūkprogrammā attēls tagad tiks izlīdzināts pa kreisi; teksts parādīsies pa labi ar atstarpi starp abiem.

Citi veidi, kā sasniegt šos stilus

Varat arī noņemt attēla klases vērtību un noformēt to ar CSS, uzrakstot precīzāku atlasītāju. Tālāk sniegtajā piemērā attēls atrodas sadalījuma iekšpusē ar a galvenais saturs klases vērtība.

Rindkopas teksts ir šeit. Šajā piemērā mums ir fotoattēls ar galvu šāvienu, tāpēc šis teksts var raksturot personu, kas atrodas galvas šāvienā.

Lai veidotu šo attēlu, uzrakstiet šo CSS:

.main-content img { 
pludiņš: pa kreisi; 
polsterējums: 0 20px 20px 0;
}

Šajā scenārijā attēls tiek izlīdzināts pa kreisi, ap to peld teksts tāpat kā iepriekš, bet bez papildu klases vērtības marķējumā. Veicot to plašā mērogā, varat izveidot mazāku HTML failu, kuru būs vieglāk pārvaldīt un kas var uzlabot veiktspēju.

Izvairieties no iekļautajiem stiliem

Visbeidzot, jūs varētu izmantot iekļautie stili:

Rindkopas teksts ir šeit. Šajā piemērā mums ir fotoattēls ar galvu šāvienu, tāpēc šis teksts var raksturot personu, kas atrodas galvas šāvienā.

Tomēr tas nav ieteicams, jo tas apvieno elementa stilu ar tā strukturālo marķējumu. Labākā prakse nosaka, ka lapas stils un struktūra paliek atsevišķi. Šī nošķiršana ir īpaši noderīga, ja jums ir jāmaina lapas izkārtojums un jāmeklē dažādi ekrāna izmēri un ierīces ar atsaucīgu vietni.