Ak sa chcete naučiť pohybovať obrázkom napravo od textu, je to dosť jednoduchá úloha. Existuje veľa situácií, keď programátori chcú, aby sa obraz na webovej stránke objavil vo vnútri textu, pričom text bude plynúť alebo omotaný okolo neho. Manipulácia s obrázkami je podobné manipulácii s textom, takže ak máte skúsenosti s textom, tento proces by nemal byť vôbec náročný.
V skutočnosti je s vlastnosťou float CSS ľahké posúvať váš obrázok napravo od textu a okolo neho prúdiť text. ľavá strana. Pomocou tohto päťminútového tutoriálu sa dozviete, ako na to.
Nastavenie rozloženia pomocou funkcie Float
Toto základné rozloženie vytvorí priestor pre váš text a umiestni obrázok vpravo od tohto textu. Tieto rozloženia sa určite môžu skomplikovať, ale tento príklad vám ukáže základný princíp práce s floatom a textom.
Za predpokladu, že už máte dokument HTML, s ktorým pracujete, a samostatnú šablónu štýlov CSS, začnite vytvorením nového divu, ktorý bude pôsobiť ako riadok obsahujúci váš plavákový prvok.
Dajte tomuto novému divu dve triedy, kontajner a clearfix. Existuje veľa spôsobov, ako to vyriešiť, a názvy sú výlučne na vašom výbere, ale pomôžu vám zostať v poriadku a vytvoriť si rozloženie.
-
Vo svojom CSS definujte, ako sa má váš kontajner zmestiť do vášho celkového rozloženia. Z tohto príkladu bude iba riadok celej šírky.
.kontajner {
šírka: 100%;
výška: 25rem;
} -
Ďalej sa postarajte o triedu clearfix. Čistá oprava je nevyhnutná, pretože plavák môže vo vašom rozložení vytvoriť niekoľko zvláštnych závad. Definovanie vlastnosti „pretečenia“ v clearfix zastaví zastavenie plávajúcich prvkov z určeného priestoru.
.clearfix {
prepad: auto;
} -
Teraz môžete vytvoriť prvok v rámci svojej div div a presunúť ho doprava. Ak zalamujete text okolo obrázka, bude to váš obrázok. Vytvorte prvok a dajte mu triedu pre float vlastnosť.
-
Vytvorte triedu pre svoj plavák. Pravdepodobne tam budete chcieť hodiť aj nejaký styling, ak budete vyrábať viac identických prvkov. V opačnom prípade môžete pre svoj styling použiť samostatnú triedu.
.float-vpravo {
plavák: vpravo;
šírka: 300px;
výška: 200px;
farba pozadia: červená;
marža: 0 0 0,5rem 0,5rem
} -
Ak chcete zalamovať text okolo tohto plaveného prvku, vložte svoj text teraz. Vložte ho kamkoľvek do nádoby, buď pred, alebo za plavákový prvok.
Nejaký text
Viac textu
...a tak ďalej.
-
Obnovte svoju stránku a pozrite si výsledok.
Balenie
A to je všetko. Teraz vidíte, že pohybovať obrázkom doprava nie je vôbec ťažké. Tiež by vás mohlo zaujímať pohyblivý obrázok vľavo a pohybujúci sa v strede. Aj keď je prvý krok možný, obraz bohužiaľ nemôžete umiestniť do stredu, pretože to by zvyčajne vyžadovalo rozloženie v dvoch stĺpcoch.