Hogyan töltsön le egy képet a szöveg bal oldalán egy weboldalon

A CSS használatával egy képet egy weboldal elrendezésének bal oldalához igazíthatja

Nézd meg szinte minden weboldalt, és látni fogod a szöveget és a képeket, amelyek az említett oldalak nagy részét alkotják. Nagyon könnyű szöveget és képeket hozzáadni egy oldalhoz . A szöveget szabványos HTML címkékkel, például bekezdésekkel, listákkal és fejlécekkel kódolják, míg a képek az elem használatával kerülnek beszámításra.

Az a képesség, hogy a szöveg és a képek jól működjenek együtt, megkülönbözteti a nagyszerű webes tervezőket! Nem csak azt szeretné, hogy a szöveg és a képek egymás után megjelenjenek, így alapértelmezés szerint ezek a blokkszintű elemek lesznek elrendezve. Nem, szeretné ellenőrizni, hogy a szöveg és a képek miként fognak egymásba áramlani, ami végső soron az Ön weboldalának vizuális tervezete lesz.

Ha egy oldal bal oldalán egy vonalba illeszkedik, miközben az oldal szövege áramlik, a nyomtatott dizájn és a weboldalak közös tervezési kezelése. A webes kifejezésekben ezt a hatást a kép lebegésének nevezik . Ez a stílus a "float" CSS tulajdonsággal érhető el. Ez a tulajdonság lehetővé teszi, hogy a szöveg a bal oldali kép körül jobbra forduljon. (Vagy egy jobb oldali kép körül bal oldalán.) Vessünk egy pillantást arra, hogyan érjük el ezt a vizuális effektust.

Indítsa el a HTML-t

Az első dolog, amire szükséged van, van egy HTML-kód, amellyel dolgozni kell. Példánk esetén a bekezdés elejére írunk egy bekezdést, és hozzáadunk egy képet (a szöveg előtt, de a nyitó

címke után). Íme, amit a HTML-jelölés néz ki:

A bekezdés szövege itt olvasható. Ebben a példában egy fejfotófotóból álló képet kapunk, így ez a szöveg valószínűleg arról szól, hogy az a személy, akinek a headshot van.

Alapértelmezés szerint weboldalunk megjelenik a szöveg feletti képen. Ennek az az oka, hogy a képek blokk szintű elemek a HTML-ben. Ez azt jelenti, hogy a böngésző alapértelmezés szerint a képelem előtt és után jeleníti meg a sortöréseket. Ezt az alapértelmezett nézetet megváltoztatjuk a CSS-re való váltással. Először is, hozzáadunk egy osztály értéket a képelemhez . Ez az osztály "horogként" fog működni, amelyet később a CSS-ben fogunk használni.

A bekezdés szövege itt megy. Ebben a példában egy fejfotófotóból álló képet kapunk, így ez a szöveg valószínűleg arról szól, hogy az a személy, akinek a headshot van.

Ne feledje, hogy ez a "baloldali" osztály önmagában semmit sem csinál! Számunkra a kívánt stílus eléréséhez a következő CSS-t kell használnunk.

CSS stílusok

A HTML-kód helyén, beleértve a "left" osztály attribútumát, most a CSS-hez fordulhatunk. Hozzáadnánk egy szabályt a stíluslapunkhoz , amely lebegne a képen, és hozzá egy kis párnát is mellette, így a szöveg, amely végső soron a kép köré tekinti, nem szorítja túl szorosan. Íme a CSS, amelyet írhat:

.left {float: left; párnázottság: 0 20px 20px 0; }

Ez a stílus lefedi azt a képet balra, és hozzáad egy kis párnázatot (néhány CSS rövidítést használ) a kép jobb és alsó részéhez.

Ha áttekintette a HTML-t tartalmazó oldalt böngészőben, akkor a kép most balra lesz igazítva, és a bekezdés szövege a jobb oldalán megfelelő mennyiségű távolsággal jelenik meg. Felhívjuk a figyelmet arra, hogy a "bal" osztály értéke önkényes. Bármit is nevezhettünk volna, mert a "baloldal" kifejezés önmagában nem tesz semmit. Ehhez olyan HTML attribútummal kell rendelkeznie egy osztály attribútummal, amely egy olyan tényleges CSS-stílusgal működik, amely meghatározza a vizuális változásokat.

Alternatív módszerek ezek elérésére

Ez a megközelítés, hogy a képelemet osztály attribútumnak adja, majd egy olyan általános CSS-stílust használ, amely lebeg az elemet, csak egy módja annak, hogy ezt a "balra igazított képet" megjelenítheti. Akkor is kiválaszthatja az osztály értékét a képen, és stílusosabbá teheti a CSS-sel, ha egy konkrétabb választót ír. Például nézzünk egy példát, ahol a kép egy "fő tartalom" osztályú értékkel rendelkező részlegen belül található.