Jei norite sužinoti, kaip paveikslėlį plukdyti teksto dešinėje, tai gana paprasta užduotis. Yra daugybė situacijų, kai programuotojai nori, kad tinklalapio vaizdas atsirastų teksto viduje tekančiu ar apvyniotu tekstu. Manipuliavimas vaizdais yra panašus į manipuliavimą tekstu, taigi, jei turite patirties su pastaruoju, šis procesas neturėtų būti sunkus.
Tiesą sakant, naudojant CSS „float“ ypatybę, vaizdą lengva plukdyti teksto dešinėje ir tekstas aplink jį tekėti kairė pusė. Norėdami sužinoti, kaip naudotis, naudokite šią penkių minučių pamoką.
Maketo su plūduriu nustatymas
Šis pagrindinis išdėstymas sukurs erdvę jūsų tekstui ir užleis vaizdą to teksto dešinėje. Be abejo, šie išdėstymai gali tapti sudėtingesni, tačiau šis pavyzdys parodys pagrindinį principą, susijusį su darbu su „float“ ir „text“.
Darant prielaidą, kad jau turite HTML dokumentą, su kuriuo dirbate, ir atskirą CSS stiliaus lapą, pirmiausia sukurkite naują div, kuris veiktų kaip eilutė, kurioje yra jūsų plūduriuojantis elementas.
Suteikite tam naujam skyriui dvi klases: „container“ ir „clearfix“. Yra daugybė būdų, kaip tai išspręsti, ir vardai yra jūsų pasirinkimas, tačiau tai padės jums būti tvarkingiems ir nustatyti išdėstymą.
-
Savo CSS apibrėžkite, kaip norite, kad sudėtinis rodinys tilptų į bendrą išdėstymą. Šis pavyzdys tiesiog padarys jį viso pločio eilute.
.container {
plotis: 100%;
aukštis: 25rem;
} -
Tada pasirūpinkite „clearfix“ klase. Aiškus pataisymas yra būtinas, nes „float“ gali sukelti keletą keistų trikdžių jūsų makete. Apibrėžiant ypatybę „perpildymas“ valymo pataisoje, plaukiantys elementai sustabdo kraujavimą iš jiems skirtos vietos.
.clearfix {
perpildymas: automatinis;
} -
Dabar galite sukurti elementą savo konteinerio skyriuje ir užplaukti jį į dešinę. Jei aplink vaizdą vyniojate tekstą, tai bus jūsų vaizdas. Sukurkite elementą ir suteikite jam „float“ savybės klasę.
-
Sukurkite savo plūdės klasę. Jūs tikriausiai norėsite mesti stilių ir ten, jei sukursite daugiau identiškų elementų. Kitu atveju galite pritaikyti atskirą klasę savo stiliui.
.flow-right {
plūdė: dešinė;
plotis: 300 taškų;
aukštis: 200 taškų;
fono spalva: raudona;
paraštė: 0 0 0.5rem 0.5rem
} -
Jei norite apvynioti tekstą aplink tą plūduriuojantį elementą, įterpkite savo tekstą dabar. Įdėkite jį bet kur į indą, prieš arba po plūduriuojančio elemento.
Šiek tiek teksto
Daugiau teksto
...ir taip toliau.
-
Atnaujinkite savo puslapį ir patikrinkite rezultatą.
Apvyniojimas
Ir tai daro. Dabar matote, kad vaizdą perkelti į dešinę visai nesunku. Jums taip pat gali būti įdomu plukdyti vaizdą kairėje ir plukdyti į centrą. Nors pirmasis žingsnis yra įmanomas, deja, jūs negalite perkelti vaizdo į centrą, nes tam paprastai reikia dviejų stulpelių išdėstymo.