Com flotar una imatge a la dreta del text

Aquest tutorial de cinc minuts explica com

T'interessa aprendre a flotar una imatge a la dreta del text? Si és així, no estàs sol. Hi ha moltes situacions on els programadors volen que una imatge en una pàgina web aparegui dins del text amb el text que flueix o s'emboliqui al voltant d'ell. Afortunadament, la manipulació d'imatges és similar a la manipulació del text, de manera que si teniu experiència amb aquest últim, aquest procés no ha de ser difícil.

De fet, amb la propietat CSS flotant, és fàcil flotar la vostra imatge a la dreta del text i fer que el text flueixi al voltant del costat esquerre . Utilitzeu aquest tutorial de cinc minuts per aprendre com fer-ho.

Començant

Per començar, escriviu un paràgraf de text i afegiu una imatge al principi del paràgraf. Això s'ha de fer abans del text, però després de l'etiqueta

:

Duis aute irure dolor sed do eiusmod temporal incididunt in reprehenderit in voluptate. Cupidatat no assenyalat, utilitzat i malmès en gran mesura. Sota la culpa quis nostru exercita excepteur sint occaecat. Mollit anim id est laborum.

A continuació, afegiu un atribut d'estil a la imatge i apliqui la propietat flotant:

style = "float: right;" />

El vostre text s'enviarà directament a la imatge, així que afegiu alguns marges a la imatge per facilitar la lectura:

margin: 0 5px 0 0; " />

La propietat taquigrafia de marge aplica marges en la part superior, dreta, inferior i esquerra de l' ordre ( TRBL ).

Embolcall

I això ho fa. Ara veieu que flotar una imatge a la dreta no és difícil. També us pot interessar la flotació d'una imatge cap a l'esquerra i el flotant cap al centre. Tot i que el primer moviment és possible, malauradament no podeu flotar una imatge al centre, ja que normalment requereixen un disseny en dues columnes.