Kui soovite teada, kuidas pilti tekstist paremal hõljuda, on see üsna lihtne ülesanne. On palju olukordi, kus programmeerijad soovivad, et veebisaidil kuvatakse pilt teksti sees voolava või selle ümber mähituna. Piltidega manipuleerimine sarnaneb tekstiga manipuleerimisega, nii et kui teil on viimasega kogemusi, ei tohiks see protsess üldse keeruline olla.
Tegelikult on CSS float atribuudiga hõlbus hõljuda oma pilti tekstist paremale ja lasta tekstil selle ümber liikuda vasak pool. Selle õppimiseks kasutage seda viieminutilist õpetust.
Ujukiga paigutuse seadistamine
See põhipaigutus loob teie tekstile ruumi ja hõljub sellest tekstist paremal asuvat pilti. Kindlasti võivad need paigutused keerukamaks minna, kuid see näide näitab ujuki ja tekstiga töötamise põhiprintsiipi.
Eeldades, et teil on juba HTML-dokument, millega töötate, ja eraldi CSS-i stiilileht, alustage uue div loomisega, mis toimiks teie ujukit sisaldava elemendina.
Pange sellele uuele div-le kaks klassi, konteiner ja tühjendus. Selle lahendamiseks on palju viise ja nimed on täielikult teie valitud, kuid need aitavad teil püsida korrastatud ja kujundada oma paigutust.
-
Määratlege oma CSS-is, kuidas soovite, et teie konteiner sobituks teie üldise paigutusega. See näide teeb sellest lihtsalt täislaiuse rea.
.konteiner {
laius: 100%;
kõrgus: 25rem;
} -
Järgmisena hoolitsege Clearfix-klassi eest. Tühjendusparandus on vajalik, kuna ujuk võib teie paigutusse tekitada paarituid tõrkeid. Atribuudi "ülevool" määratlemine peatab hõljuvate elementide verejooksu nende määratud ruumist välja.
.clearfix {
ülevool: auto;
} -
Nüüd saate oma konteinerisse luua elemendi ja hõljuda seda paremale. Kui keerate pildi ümber teksti, oleks see teie pilt. Looge element ja andke talle float-omaduse klass.
-
Looge oma ujuki jaoks klass. Tõenäoliselt soovite sinna visata ka mõne stiili, kui teete identseid elemente. Vastasel juhul saate oma stiili jaoks rakendada eraldi klassi.
.float-right {
ujuk: paremal;
laius: 300px;
kõrgus: 200px;
taustavärv: punane;
marginaal: 0 0 0,5rem 0,5rem
} -
Kui soovite teksti hõljuva elemendi ümber mähkida, sisestage oma tekst kohe. Pange see konteinerisse ükskõik kuhu, enne või pärast ujukit.
Natuke teksti
Rohkem teksti
...ja nii edasi.
-
Värskendage oma lehte ja vaadake tulemust.
Pakkimine
Ja see teeb seda. Nüüd näete, et pildi paremale hõljumine pole üldse keeruline. Samuti võite olla huvitatud pildi vasakule hõljumisest ja selle keskele hõljumisest. Kuigi esimene käik on võimalik, ei saa te kahjuks pilti keskele hõljuda, kuna see eeldaks tavaliselt kaheveergulist paigutust.