Ha érdekel, hogy megtanulják, hogyan kell lebegtetni a képet a szövegtől jobbra, az meglehetősen egyszerű feladat. Számos olyan helyzet van, amikor a programozók azt akarják, hogy egy weboldalon egy kép megjelenjen a szöveg belsejében, miközben a szöveg folyik vagy köré van tekerve. Képek manipulálása hasonló a szöveg manipulálásához, így ha tapasztalata van az utóbbival kapcsolatban, akkor ez a folyamat egyáltalán nem lehet nehéz.
Valójában a CSS float tulajdonsággal könnyen lebegtetheti a képet a szövegtől jobbra, és a szöveg körülötte folyhat bal oldal. Használja ezt az öt perces oktatóanyagot a megtanuláshoz.
Elrendezés beállítása úszóval
Ez az alapelrendezés helyet hoz létre a szöveg számára, és egy képet lebeg a szövegtől jobbra. Természetesen ezek az elrendezések bonyolultabbá válhatnak, de ez a példa megmutatja az úszó és a szöveg használatának alapelvét.
Feltételezve, hogy már rendelkezik egy HTML-dokumentummal, amellyel dolgozik, és egy külön CSS-stíluslapdal, először hozzon létre egy új div-t, amely az lebegő elemet tartalmazó sorként működik.
Adja meg az új div osztályt, a tárolót és a clearfixet. Rengeteg módszer van ennek kezelésére, és a nevek teljes mértékben az ön választása, de ezek segítenek abban, hogy rendezett maradjon és kialakítsa az elrendezést.
-
A CSS-ben határozza meg, hogy a tároló hogyan illeszkedik az általános elrendezésbe. Ez a példa csak egy teljes szélességű sor lesz.
.container {
szélesség: 100%;
magasság: 25rem;
} -
Ezután vigyázzon a clearfix osztályra. A clearfixre azért van szükség, mert az float néhány furcsa hibát okozhat az elrendezésben. A "túlcsordulás" tulajdonság definiálása a tiszta javításban megakadályozza, hogy az úszó elemek kivérezzenek a kijelölt helyükről.
.clearfix {
túlcsordulás: auto;
} -
Most létrehozhat egy elemet a tároló div-jében, és lebegtetheti jobbra. Ha szöveget teker egy kép köré, akkor ez lesz a képe. Hozza létre az elemet, és adjon neki egy osztályt a float tulajdonsághoz.
-
Készítse el az osztályt az úszó számára. Valószínűleg érdemes oda is dobnia néhány fazont, ha azonosabb elemeket készít. Ellenkező esetben külön osztályt alkalmazhat a stílusához.
.float-right {
úszó: jobbra;
szélesség: 300px;
magasság: 200px;
háttérszín: piros;
margó: 0 0 0,5rem 0,5rem
} -
Ha szöveget szeretne tekerni az úszó elem köré, helyezze be a szöveget most. Helyezze bárhová a tartályba, akár az úszó elem elé, akár utána.
Néhány szöveg
További szöveg
...stb.
-
Frissítse az oldalát, és nézze meg az eredményt.
Csomagolás
És ez megteszi. Most azt látja, hogy a kép jobbra lebegtetése egyáltalán nem nehéz. Érdekes lehet egy kép balra történő lebegtetése és középre lebegtetése is. Bár az első lépés lehetséges, sajnos nem úsztathat képet középre, mivel ehhez általában két oszlopos elrendezésre lenne szükség.