Uporabite CSS Align Left, da lebdite sliko spletnega mesta levo od besedila

Elementi na ravni bloka na spletni strani prikažejo v zaporednem vrstnem redu. Če želite izboljšati videz ali uporabnost strani, lahko ta vrstni red spremenite tako, da zavijete bloke, vključno s slikami besedilo teče okoli slik.

V smislu spletnega oblikovanja je ta učinek znan kot plavajoča slika. To se doseže z Lastnost CSSplovec, ki omogoča, da besedilo teče okoli levo poravnane slike na njeno desno stran (ali okoli desno poravnane slike na levo stran).

Začnite z HTML

Ta primer doda sliko na začetku odstavka (pred besedilom, vendar po odprtju

oznaka). Tu je začetna oznaka HTML:

Besedilo odstavka je tukaj. V tem primeru imamo podobo fotografije posnetka glave, zato lahko to besedilo opiše osebo na posnetku glave.

Stran se privzeto prikaže s sliko nad besedilom, ker so slike elementi na ravni bloka v HTML-ju. To pomeni, da brskalnik privzeto prikaže prelome vrstic pred in za elementom slike. Če želite spremeniti ta privzeti videz s pomočjo CSS, dodajte vrednost razreda (

levo) na slikovni element, da služi kot kavelj, na katerega je mogoče pritrditi lastnosti.

Besedilo odstavka je tukaj. V tem primeru imamo podobo fotografije posnetka glave, zato lahko to besedilo opiše osebo na posnetku glave.

Upoštevajte, da ta razred sam ne naredi ničesar. CSS bo dosegel želeni slog.

Dodajanje slogov CSS

To pravilo dodajte spletnim mestom tabela slogi:

.left {
plovec: levo;
oblazinjenje: 0 20px 20px 0;
}

Ta slog plava z razredom levo na levi strani in doda malo oblazinjenje na desni in spodnji strani slike, da se besedilo ne udari naravnost obnjo.

V brskalniku bi bila slika poravnana levo; besedilo bi se prikazalo na desni s presledkom med obema.

Drugi načini za doseganje teh stilov

Prav tako lahko s slike odstranite vrednost razreda in jo oblikujete s CSS, tako da napišete natančnejši izbirnik. V spodnjem primeru je slika znotraj oddelka z glavna vsebina vrednost razreda.

Besedilo odstavka je tukaj. V tem primeru imamo podobo fotografije posnetka glave, zato lahko to besedilo opiše osebo na posnetku glave.

Če želite oblikovati to sliko, napišite ta CSS:

.main-content img { 
plovec: levo; 
oblazinjenje: 0 20px 20px 0;
}

V tem primeru je slika poravnana na levo, besedilo pa lebdi okoli nje kot prej, vendar brez dodatne vrednosti razreda v oznaki. Če to naredite v velikem obsegu, lahko ustvarite manjšo datoteko HTML, ki jo bo lažje upravljati in izboljšati zmogljivost.

Izogibajte se vstavljenim slogom

Končno lahko uporabite vstavljeni slogi:

Besedilo odstavka je tukaj. V tem primeru imamo podobo fotografije posnetka glave, zato lahko to besedilo opiše osebo na posnetku glave.

To pa ni priporočljivo, ker združuje slog elementa s strukturnimi oznakami. Najboljši postopki narekujejo, da slog in struktura strani ostaneta ločena. Ta ločitev je še posebej koristna, kadar morate spremeniti postavitev strani in poiskati različne velikosti zaslona in naprave z odzivnim spletnim mestom.