Szükség van a kódra a szöveg köré tekercseléséhez? Általában, amikor HTML-oldalt hoz létre, minden lineárisan folyik, ami egy blokkot közvetlenül a másik után jelent. Minden korábbi hozzászólásom példa erre: szöveg, kép, majd szöveg, stb.
Néha előfordulhat, hogy a kép mellett egy szöveget is beilleszti ahelyett, hogy alatta lenne. Ezt a kép köré tekercselési szöveget hívják. Tényleg elég könnyű a szöveget HTML használatával. Ne feledje, hogy nem kell CSS-t használni a szöveg becsomagolásához.
Azonban ezekben a napokban a W3C javasolja a CSS helyett a HTML használatát. Az alábbiakban mindkét módszert megemlítem, de ha tudod, jobb, ha a CSS-t használod, mivel jobban alkalmazkodik az érzékeny weboldalakhoz.
Tekintse át a szöveget a környéken: HTML
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing szinkittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas nem imperdiet enim congue.
Annak érdekében, hogy a szöveg a kép jobb oldalán legyen, a képet balra kell igazítani:
A szöveg itt megy.
Ha azt szeretné, hogy a szöveg a bal oldalon jelenik meg, és a kép a jobb szélen jelenik meg, csak az igazítási paramétert „jobbra” változtassa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing szinkittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas nem imperdiet enim congue.
A szöveg itt megy.
Ez az! Elég könnyű? Az egyetlen alkalom, amikor a CSS-t szeretné használni, ha margókat szeretne hozzáadni a képekhez, úgyhogy van egy kis hely a szöveg és a kép között.
A következő CSS-stíluskód használatával margókat adhat hozzá:
A szöveg itt megy.
A fenti kód a MARGIN CSS elemet használja, hogy 10 képpontnyi helyet adjon a kép jobb oldalán. Mivel a képet balra igazítottuk, jobbra szeretnénk hozzáadni a helyet.
Alapvetően a négy szám a TOP RIGHT BOTTOM LEFT. Tehát ha a fehér területet jobbra igazított képhez szeretné hozzáadni, akkor ezt tenné:
A szöveg itt megy.
Tehát elég egyszerű a HTML használata a feladat elvégzéséhez, de még egyszer nem működik jól az érzékeny webhelyeken.
Tekerje át a szöveget a környéken a CSS használatával
A szöveg köré tekercselés jobb módja a CSS használata. Ez több finom szemcsés vezérlést biztosít az elemek elhelyezéséhez, és jobban működik a modern kódolási szabványokkal.
Annak ellenére, hogy a CSS-t közvetlenül a HTML-példány képcímkéjébe vittem be, soha többé nem teheted ezt. Ehelyett külön fájlnak kell lennie, amit stíluslapnak nevezünk, amely tartalmazza az összes CSS kódot.
Az IMG címkében egyszerűen hozzárendelhet egy osztályt a címkéhez, és megadhat egy nevet. Példámban az osztályt elneveztem. A stíluslapomban mindössze a következő kódot kell hozzáadnom:
.left {float: balra; párnázás: 0 10px 0 0;} Mint látható, 10px-t adtam hozzá a bal oldali kép jobb oldalához. A lebegő tulajdonságot is használtam a kép normál áramlásától, és a szülőtartály bal oldalára helyeztem.
Mint látható, ez sokkal tisztább, mint az összes kód hozzáadása az IMG címkéhez. Az is könnyebb kezelni, és sokkal több CSS tulajdonságot használhat a weblap megjelenésének testreszabásához. Ha bármilyen kérdése van, ne habozzon megjegyzést tenni. Élvez!
