Használja a CSS Balra igazítást, hogy a webhely képét a szöveg bal oldalán lebegtesse

Blokk szintű elemek egy weboldalon egymás után jelennek meg. Az oldal megjelenésének vagy hasznosságának javítása érdekében módosíthatja ezt a sorrendet úgy, hogy blokkokat, beleértve a képeket is, becsomagolja a képek körül a szöveg áramlik.

Web design szempontjából ezt a hatást a kép lebegésének nevezik. Ezt a CSS tulajdonságúszó, amely lehetővé teszi, hogy a szöveg a balra igazított kép körül a jobb oldalára (vagy a jobbra igazított kép körül a bal oldalára) áramoljon.

Kezdje a HTML-vel

Ez a példa képet ad a bekezdés elején (a szöveg előtt, de a nyitás után)

címke). Itt van a kezdeti HTML jelölés:

A bekezdés szövege ide kerül. Ebben a példában van egy képünk egy fejlövésről készült fényképről, így ez a szöveg leírhatja a fejlövésben szereplő személyt.

Alapértelmezés szerint az oldal a kép felett jelenik meg a szöveg felett, mert a képek blokkszintű elemek a HTML-ben. Ez azt jelenti, hogy a böngésző alapértelmezés szerint sortöréseket jelenít meg a képelem előtt és után. Az alapértelmezett megjelenés CSS használatával történő megváltoztatásához adjon hozzá egy osztályértéket (

bal) a kép elemhez, hogy horogként szolgáljon, amelyhez tulajdonságok kapcsolódhatnak.

A bekezdés szövege ide kerül. Ebben a példában van egy képünk egy fejlövésről készült fényképről, így ez a szöveg leírhatja a fejlövésben szereplő személyt.

Vegye figyelembe, hogy ez az osztály önmagában nem csinál semmit. CSS el fogja érni a kívánt stílust.

CSS-stílusok hozzáadása

Adja hozzá ezt a szabályt a webhelyéhez stíluslap:

.bal {
balra lebeg;
párnázás: 0 20px 20px 0;
}

Ez a stílus bármit lebeg az osztályban bal az oldal bal oldalán, és hozzátesz egy kicsit párnázás a kép jobb és alsó részén, hogy a szöveg ne fusson ellene.

Egy böngészőben a kép most balra lesz igazítva; a szöveg jobb oldalán, a kettő között szóközzel jelenik meg.

Más módszerek ezeknek a stílusoknak az elérésére

Leveheti az osztály értékét a képről, és CSS-sel stílusozhatja egy specifikusabb választó megírásával. Az alábbi példában a kép az a-val való osztás belsejében található központi téma osztály értéke.

A bekezdés szövege ide kerül. Ebben a példában van egy képünk egy fejlövésről készült fényképről, így ez a szöveg leírhatja a fejlövésben szereplő személyt.

A kép stílusának megírásához írja be ezt a CSS-t:

.main-content img { 
balra lebeg; 
párnázás: 0 20px 20px 0;
}

Ebben a forgatókönyvben a kép balra igazodik, a szöveg úgy lebeg körülötte, mint korábban, de a jelölésben az extra osztályérték nélkül. Ha ezt nagymértékben végrehajtja, elősegíthet egy kisebb HTML fájl létrehozását, amely könnyebben kezelhető és javíthatja a teljesítményt.

Kerülje a beillesztett stílusokat

Végül használhatja inline stílusok:

A bekezdés szövege ide kerül. Ebben a példában van egy képünk egy fejlövésről készült fényképről, így ez a szöveg leírhatja a fejlövésben szereplő személyt.

Ez azonban nem tanácsos, mert egyesíti az elem stílusát a szerkezeti jelölésével. A bevált gyakorlatok előírják, hogy az oldal stílusa és szerkezete külön maradjon. Ez a szegregáció különösen akkor hasznos, ha meg kell változtatnia az oldal elrendezését, és különféle képernyőméreteket és eszközöket kell keresnie egy érzékeny webhelyen.