Cume a flutterà una Image à a manca di u testu in un situ Webpage

Utilizare CSS para alineate una imagina à u latu di una pagina Web Layout

Fighjate quasi ogni pagina web oghje è vi vede una cumminazione di textuale e imagine chì compone u più grande di questi siti. Hè assai faciule per aghjunghje un testu è imaghjini à una pagina . U testu hè codificatu cù un tag HTML standard cum'è paragrafi, liste, è encapritti, mentri l'imaginari inclettenu cù l' element .

L'abilità di fà stu testu è l'imàgine travagliani bè cumu hè chì stabilisce ghjenti web designer! Ùn avete micca solu u vostru testu è l'imagine per esse unu appressu à l'altru, chì hè cumu questi questi l'elementi di ubligatoriu disposeranu di u funziunamentu. No, vulete un pocu di cuntrollu di cumu si u testu è l'imàscenu culminate in quale ultimamente sò u disignu visuale di u vostru situ web.

Dopu una impresa chì hè allinatu à u latu di una pagina mentre u testu di sta pagina flussi in u circondu hè un trattamentu di designu cumuni per u prugettu stampatu è ancu per e pagine web. In i termichi web, questu effetti hè cunnisciutu cumu per l'imagine . Questu stilisticu hè cunsigliatu cù a propietata CSS per "float". Sta pruprietà permette à u textu di flussu versu l'image alineata à u latu à u dirittu right. (O vicinu à una figura di l'alleata righjunali à u so lado). Fighjate nantu à a manera di cumprà l'effettu veru.

Inizio cù HTML

U primu chì hà bisognu à fà hè ancu qualchì HTML per travaglià. Per u nostru esempiu, scrivemu un paràgrafu di testu è aghjunghje una imatge à u principiu di u paràgrafu (prima di u testu, ma dopu l'apertura

tag). Eccu ciò chì hè stallatu HTML:

U testu di u paràgrafu si va da quì. In questu esempiu, avemu una imaghjini di una photo di auriculaire, perchè stu testu puderia esse circate nantu à a persona chì hà e capicuta.

Per automaticamente, a nostra pàgina pudè esse spiegatu cù l'imagina sopra à u testu. Questu hè chì l'imaghjini sò elementi di ubligatoriu in HTML. Questu significa chì u navigatore cercanu viaghja di linea è dopu l'elementu d'imàgine per difettu. Avemu cambiatu sta modellu predeterminato si vultò in CSS. Prima, però, aghjustemu un valor di classi à u nostru elementu d'imagine . Questa classe aghjà da esse un "hook" chì avemu usatu in a nostra CSS dopu.

U testu di u paràgrafu si va da quì. In questu esempiu, avemu una imaghjini di una photo di auriculaire, perchè stu testu puderia esse circate nantu à a persona chì hà e capicuta.

Innota chì sta classa di "left" ùn faci nunda in tuttu in u so propiu. Per noi di ottene u nostru modu desitxutu, avemu bisognu di utilizà CSS allora.

CSS Styles

Cù u nostru HTML in u locu, cumpresu a nostra attribuità di classa di "left", pudemu issa volta à CSS. Forse aghjà una regula à a nostra stile chì flutterarà quella imagina è ancu aghjunghje un padding di pezzu appressu à quessa chì u testu chì finiscenu l'ingiru à l'imaghjina ùn pò micca culpèvule ancu nantu à ellu. Eccu a CSS pudete scrive:

.left {float: left; padding: 0 20px 20px 0; }

Stu stilusu floci chì l'imaghjini à u left è aghjunghjenu un padding pocu (cun ​​un liggeru CSS) à u dirittu è di u fondu di l'imaghjini.

Se avete rivista a pàgina chì cuntene stu HTML in un navigatore, l'impresa hè stata alinata à l'ubligatoriu è u testu di u paràgrave pronti à u dirittu cù una quantità approprita di spazzata tra u dui. Avè i valori di a classa di "left" chì avemu usatu hè arbitrariu. Pudemu avè chjamatu solu perchè u termine "left" ùn faci micca nunda in u so propiu. Hè bisognu di avè un attributu classificatu in u HTML chì travaglia cun un stilullendu CSS chì dicta u cambiamentu visuale chì vulete fà.

Modi Alternattivi Per Achieving These Styles

Questa attrazzioni di dà l'elementu d'imagine un attribuu di classe è da esse aduprate un stilcru CSS in generale chì u carattere l'elementu hè solu un modu chì pudete esse cumpiutu sta "strada aligned left". Pudete ancu piglià u valore di a classa di l'imaghjini è u stilu cù CSS scritte un selettore più specificu. Per esempiu, aghju vede un esempiu quandu l'sta imagina hè in una divisiona cun u valore di classi di "cuntenutu principali".