Ako vyplniť obrázok na ľavej strane textu na webovej stránke

Použitie CSS na zarovnanie obrázka na ľavú stranu rozloženia webovej stránky

Pozrite sa takmer na ľubovoľnú webovú stránku a uvidíte kombináciu textu a obrázkov tvoriacich veľkú časť týchto stránok. Je veľmi ľahké pridať text a obrázky na stránku . Text je kódovaný pomocou štandardných značiek HTML, ako sú odseky, zoznamy a nadpisy, zatiaľ čo obrázky sú zahrnuté pomocou elementu .

Schopnosť urobiť tento text a tie obrázky dobre spolupracovať je to, čo určuje skvelé webové dizajnérmi! Nechcete len, aby sa váš text a obrázky zobrazovali jeden po druhom, čo je spôsob, akým budú tieto prvky na úrovni bloku štandardne rozvrhnuté. Nie, chcete mať určitú kontrolu nad tým, ako text a obrázky prúdia spolu, čo bude nakoniec vizuálny dizajn vašej webovej stránky.

S obrázkom, ktorý je zarovnaný s ľavou stranou stránky, zatiaľ čo text tejto stránky preteká okolo nej, je bežnou konštrukčnou úpravou pre tlačený dizajn a tiež pre webové stránky. V webových termínoch je tento efekt známy ako plávajúci obraz . Tento štýl sa dosiahne pomocou funkcie CSS pre "float". Táto vlastnosť umožňuje, aby text prechádzal po ľavom zarovnanom obrázku na jeho pravú stranu. (Alebo okolo pravého obrázku na ľavej strane.) Poďme sa pozrieť na to, ako dosiahnuť tento vizuálny efekt.

Začnite pomocou kódu HTML

Prvá vec, ktorú budete musieť urobiť, je pracovať s HTML. Pre náš príklad napíšeme odsek textu a pridáme obrázok na začiatku odseku (pred textom, ale po otvorení značky

). Tu je to, čo značka HTML vyzerá takto:

Tu sa nachádza text odstavca. V tomto príklade máme obrázok hlavy s fotografiou, takže tento text by sa pravdepodobne týkal osoby, ktorej je záhlavie určené.

V predvolenom nastavení sa naša webová stránka zobrazí s obrázkom nad textom. Je to preto, že obrázky sú elementy na úrovni bloku v jazyku HTML. To znamená, že prehliadač predvolene zobrazuje prerušenie riadkov pred a po prvku obrázka. Tento predvolený vzhľad zmeníme otočením na CSS. Najprv však pridáme prvok triedy do nášho obrazového prvku . Táto trieda bude fungovať ako "hák", ktorý budeme používať v našom CSS neskôr.

V tomto príklade máme obrázok hlavy s fotografiou, takže tento text by sa pravdepodobne týkal osoby, ktorej je záhlavie určené.

Všimnite si, že táto trieda "vľavo" nič nečiní sama o sebe! Aby sme dosiahli požadovaný štýl, musíme použiť CSS ďalej.

CSS štýly

S našim HTML na mieste, vrátane našej triedy atribút "vľavo", môžeme teraz obrátiť na CSS. Pridali by sme pravidlo do našej šablóny so štýlmi, ktoré by tento obrázok plávali a tiež pridať malé políčko vedľa neho, takže text, ktorý sa nakoniec obklopí obrazom, nepríde proti nemu. Tu je CSS, ktorý môžete napísať:

.left {float: left; polstrovanie: 0 20px 20px 0; }

Tento štýl pláva tento obrázok doľava a pridáva malé polstrovanie (pomocou nejakej steny CSS) do pravej a dolnej časti obrazu.

Ak ste v prehliadači skontrolovali stránku, ktorá obsahuje tento HTML, obrázok by bol teraz zarovnaný doľava a text odseku by sa mohol zobraziť vpravo s primeraným rozstupom medzi týmito dvoma. Všimnite si, že hodnota triedy "ľavá", ktorú sme použili, je ľubovoľná. Mohli sme to nazvať čokoľvek, pretože termín "vľavo" nič nečiní sám. Toto musí mať atribút triedy v jazyku HTML, ktorý pracuje so skutočným štýlom CSS, ktorý určuje vizuálne zmeny, ktoré chcete robiť.

Alternatívne spôsoby, ako dosiahnuť tieto štýly

Tento prístup dávať elementu obrázku atribút triedy a potom pomocou všeobecného štýlu CSS, ktorý pláva prvok je len jedným spôsobom, ako môžete dosiahnuť tento vzhľad "ľavého vyrovnaného obrazu". Tiež by ste mohli vziať hodnotu triedy z obrazu a štýlovať ju s CSS tým, že napíšete konkrétnejší výber. Pozrime sa napríklad na príklad, keď je tento obrázok v rámci divízie s hodnotou triedy "main-content".