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

The best protection against click fraud.

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).

ženska spletna razvijalka, ki dela na računalniku
Maskot / Getty Images

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 (

instagram viewer
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.

Vrednost razreda .levo uporabljen tukaj je poljuben. Lahko ga pokličete kakor koli izberete, ker sam ne naredi ničesar. Vendar tudi ne smete, da bi se katera koli vrednost, ki jo spremenite v CSS, odražala tudi v HTML-ju.

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.

Prepletanje sloga strani s HTML naredi ustvarjanje medijskih poizvedb veliko težje prilagoditi spletno mesto za različne zaslone.

instagram story viewer