Pomocou CSS Zarovnať vľavo môžete pohybovať obrázkom webu naľavo od textu

Prvky na úrovni blokov na webovej stránke sa zobrazia v postupnom poradí. Ak chcete vylepšiť vzhľad alebo užitočnosť stránky, môžete toto poradie upraviť tak, že zalomíte bloky vrátane obrázkov text obteká obrázky.

Z hľadiska webdizajnu je tento efekt známy ako pohyblivý obraz. Toto sa dosahuje pomocou Vlastnosť CSSplavák, ktorý umožňuje prúdenie textu okolo obrázka zarovnaného doľava na jeho pravú stranu (alebo okolo obrázka zarovnaného vpravo na jeho ľavú stranu).

Začnite s HTML

Tento príklad pridá obrázok na začiatok odseku (pred text, ale po úvodnej časti)

značka). Tu je úvodné označenie HTML:

Text odseku ide tu. V tomto príklade máme obrázok fotografie z hlavy, takže tento text môže popisovať osobu, ktorá je z hlavy.

V predvolenom nastavení by sa stránka zobrazovala s obrázkom nad textom, pretože obrázky sú prvkami na úrovni bloku v HTML. To znamená, že prehľadávač predvolene zobrazuje zalomenie riadkov pred a za prvkom obrázka. Ak chcete zmeniť tento predvolený vzhľad pomocou CSS, pridajte hodnotu triedy (

vľavo) prvku obrazu, ktorý slúži ako hák, ku ktorému je možné pripojiť vlastnosti.

Text odseku ide tu. V tomto príklade máme obrázok fotografie z hlavy, takže tento text môže popisovať osobu, ktorá je z hlavy.

Upozorňujeme, že táto trieda nerobí nič sama. CSS dosiahne požadovaný štýl.

Pridávanie štýlov CSS

Pridajte toto pravidlo na stránku šablóna so štýlmi:

.vľavo {
plavák: vľavo;
výplň: 0 20px 20px 0;
}

Tento štýl vznáša čokoľvek s triedou vľavo naľavo od stránky a trochu pridáva vypchávka napravo a naspodku obrázka, aby sa text oproti nemu nedotýkal.

V prehliadači by bol teraz obrázok zarovnaný doľava; text sa objaví vpravo s medzerou medzi nimi.

Iné spôsoby, ako dosiahnuť tieto štýly

Hodnotu triedy môžete tiež z obrázka odobrať a upraviť ho pomocou CSS napísaním konkrétnejšieho selektora. V nasledujúcom príklade je obrázok vnútri rozdelenia s a hlavný obsah hodnota triedy.

Text odseku ide tu. V tomto príklade máme obrázok fotografie z hlavy, takže tento text môže popisovať osobu, ktorá je z hlavy.

Ak chcete tento obrázok upraviť, napíšte tento štýl CSS:

.main-content img { 
plavák: vľavo; 
výplň: 0 20px 20px 0;
}

V tomto scenári je obrázok zarovnaný doľava, pričom text okolo neho pláva tak ako predtým, ale bez hodnoty extra triedy v označení. Ak to urobíte vo veľkom, môže to pomôcť vytvoriť menší súbor HTML, ktorý sa bude ľahšie spravovať a môže zlepšiť výkon.

Vyhýbajte sa vloženým štýlom

Nakoniec by ste mohli použiť vložené štýly:

Text odseku ide tu. V tomto príklade máme obrázok fotografie z hlavy, takže tento text môže popisovať osobu, ktorá je z hlavy.

To však nie je vhodné, pretože kombinuje štýl prvku s jeho štrukturálnym označením. Osvedčené postupy diktujú, aby štýl a štruktúra stránky zostali oddelené. Táto segregácia je obzvlášť užitočná, keď potrebujete zmeniť rozloženie stránky a hľadať responzívny web s rôznymi veľkosťami obrazovky a zariadeniami.