Ja jūs interesē iemācīties peldēt attēlu pa labi no teksta, tas ir diezgan vienkāršs uzdevums. Ir daudzas situācijas, kad programmētāji vēlas, lai Web lapā attēls parādās teksta iekšpusē ar tekošu vai ap to apvītu tekstu. Manipulējot ar attēliem ir līdzīgs manipulēšanai ar tekstu, tādēļ, ja jums ir pieredze ar pēdējo, šim procesam nevajadzētu būt grūti.
Patiesībā, izmantojot CSS pludiņa rekvizītu, ir viegli peldēt attēlu pa labi no teksta un likt tekstam ap to plūst kreisā puse. Izmantojiet šo piecu minūšu apmācību, lai uzzinātu, kā to izdarīt.
Izkārtojuma ar pludiņu iestatīšana
Šis pamata izkārtojums izveidos vietu jūsu tekstam un peldēs attēlu pa labi no šī teksta. Protams, šie izkārtojumi var kļūt sarežģītāki, taču šis piemērs parādīs pamatprincipu darbam ar pludiņu un tekstu.
Pieņemot, ka jums jau ir HTML dokuments, ar kuru strādājat, un atsevišķa CSS stila lapa, vispirms izveidojiet jaunu div, kas darbotos kā rinda, kurā ir jūsu peldošais elements.
Piešķiriet jaunajai divai kategorijai konteineru un dzēšfiksu. Ir daudz veidu, kā to apstrādāt, un nosaukumi ir pilnībā jūsu izvēle, taču tie palīdzēs jums uzturēt sakārtotību un izveidot izkārtojumu.
-
CSS definējiet, kā vēlaties, lai jūsu konteiners ietilptu jūsu vispārējā izkārtojumā. Šis piemērs vienkārši padara to par pilna platuma rindu.
.konteiners {
platums: 100%;
augstums: 25rem;
} -
Pēc tam rūpējieties par clearfix klasi. Skaidrs labojums ir nepieciešams, jo pludiņš var radīt dažus nepāra traucējumus jūsu izkārtojumā. "Pārplūdes" rekvizīta noteikšana tīrīšanas labojumā aptur peldošo elementu asiņošanu no tiem paredzētās vietas.
.clearfix {
pārplūde: auto;
} -
Tagad konteinera divā jūs varat izveidot elementu un peldēt pa labi. Ja iesaiņojat tekstu ap attēlu, tas būs jūsu attēls. Izveidojiet elementu un piešķiriet tam klases float īpašumam.
-
Izveidojiet savu pludiņa klasi. Jūs, iespējams, vēlēsities iemest arī dažus stilus, ja veidosiet vairāk identisku elementu. Pretējā gadījumā jūs varat piemērot atsevišķu klasi savam stilam.
.float-right {
pludiņš: pa labi;
platums: 300 pikseļi;
augstums: 200 pikseļi;
fona krāsa: sarkana;
starpība: 0 0 0.5rem 0.5rem
} -
Ja vēlaties aplīmēt tekstu ap šo peldošo elementu, ievietojiet tekstu tūlīt. Ievietojiet to jebkur traukā, pirms vai pēc peldošā elementa.
Daži teksts
Vairāk teksta
...un tā tālāk.
-
Atsvaidziniet savu lapu un pārbaudiet rezultātu.
Iesaiņošana
Un tas to arī izdara. Tagad jūs redzat, ka attēla peldēšana pa labi nemaz nav grūta. Iespējams, jūs interesēs arī attēla peldēšana pa kreisi un peldēšana līdz centram. Kaut arī ir iespējama pirmā kustība, diemžēl jūs nevarat peldēt attēlu uz centru, jo tam parasti būtu nepieciešams divu kolonnu izkārtojums.