Kā iestatīt attēla pozīciju CSS?

Izstrādātāji iestatīja attēla pozīciju, lai izveidotu skaidru vizuālo hierarhiju, nosakot attēla secību un izmērus attiecībā pret citiem HTML elementiem. Novietojot attēlu dažādās pozīcijās, var ģenerēt arī modernus, unikālus un pielāgotus dizainus, kas var mainīt vietnes izskatu un izskatu. Šajā rakstā ir parādīta procedūra attēla pozīcijas iestatīšanai, izmantojot CSS.

- Float Property izmantošana
- Izmantojot objekta pozīcijas īpašumu

Kā iestatīt attēla pozīciju CSS?

Iestatot attēla pozīciju CSS, tiek nodrošinātas tādas priekšrocības kā precīzs izvietojums ”, “ pārklājošais elements ' un ' atsaucīgs dizains ” var viegli sasniegt. Izmantojot šīs priekšrocības, izstrādātāji var viegli pielāgot un izveidot pilnībā funkcionālu un uzkrītošu vietni. Ir divas metodes/īpašības, ar kurām var iestatīt attēla pozīciju. Šīs īpašības ir aprakstītas zemāk:

1. metode: peldošā īpašuma izmantošana

' peldēt ” rekvizītu nodrošina CSS HTML elementu pārvietošanai pa kreisi ” vai “ pa labi ” virziens. To galvenokārt izmanto, veidojot atsaucīgu izkārtojumu precīzai HTML elementu izvietošanai.

Piemēram, rekvizīts “pludiņš” tiek izmantots attēlu līdzināšanai gan tīmekļa lapas kreisajā, gan labajā pusē:

< div >
< img src = 'bg.jpg' augstums = '300 pikseļi' platums = '400 pikseļi' klasē = 'pozīcija pa labi' >
< img src = 'grāmata.jpg' augstums = '300 pikseļi' platums = '400 pikseļi' klasē = 'pozīcija pa kreisi' >
div >

Iepriekš minētajā kodā:

- Pirmkārt, sakne ' div ” tiek izveidots elements, kas darbojas kā HTML elementu konteiners.
- Tālāk divi ' tagi tiek izmantoti iekšpusē
  ” tagu.
- Pēc tam vērtības ' 300 pikseļi ' un ' 400 pikseļi ' tiek nodrošināti ' augstums ' un ' platums ' abu ' atribūti ” atzīmes.
- Piešķiriet arī klasi “ pozīcija pa labi ' un ' pozīcija pa kreisi ” uz pirmo un otro “ ” tagu, attiecīgi.

Tagad ievadiet ' ” tagu, lai lietotu šādus CSS rekvizītus:

< stils >
.pozīcija Pa labi {
pludiņš: pa labi;
}
.pozīcija pa kreisi {
pludiņš: pa kreisi;
}
stils >

Apraksts ir sniegts zemāk:

- Vispirms atlasiet “ pozīcija pa labi ” klasē un iestatiet vērtību pa labi 'uz savu' peldēt ” īpašums. Tādējādi atlasītais HTML elements tiek pārvietots pareizajā tīmekļa lapas virzienā.
- Pēc tam atlasiet “ pozīcija pa kreisi ” klasē un sniedz vērtību “ pa kreisi 'uz' peldēt ” īpašums. Tādējādi elements tiek pārvietots uz kreiso pusi.

Pēc apkopošanas posma beigām:

Izvade parāda, ka attēli ir iestatīti kreisajā un labajā pozīcijā.

2. metode: objekta pozīcijas rekvizīta izmantošana

' objekts-pozīcija ” rekvizīts nodrošina attēla vai HTML elementa izvietošanu noteiktā tīmekļa lapas pozīcijā. Tas ļauj kontrolēt horizontālo un vertikālo novietojumu, ļaujot lietotājam sasniegt vēlamo vizuālo efektu vai izkārtojumu. Izstrādātāji to galvenokārt izmanto attēlu apgriešanai, sīktēlu izveidei, pielāgotiem izkārtojumiem utt.

Šim īpašumam var būt gan skaitliskas, gan atslēgvārdu vērtības. Piemēram, ir paredzētas gan skaitliskās, gan atslēgvārdu vērtības objekts-pozīcija ” īpašums. Tā iestata attēla pozīciju CSS, izmantojot tālāk norādīto koda fragmentu.

< stils >
.numericalValues
{
objekta pozīcija: 100 pikseļi 20 pikseļi;
}
.keywordValues
{
objekta pozīcija: pa kreisi;
}
stils >
< ķermeni >
< div >
< img src = 'grāmata.jpg' augstums = '300 pikseļi' platums = '400 pikseļi' klasē = 'atslēgvārdu vērtības' >
< img src = 'bg.jpg' augstums = '300 pikseļi' platums = '400 pikseļi' klasē = 'skaitliskās vērtības' >
div >
ķermeni >

Iepriekš minētajā koda fragmentā:

- Pirmkārt, ' skaitliskās vērtības ' klase ir atlasīta iekšpusē ' ” tagu. Un skaitliskās vērtības ' 100 pikseļi 20 pikseļi 'tiek nodrošināti CSS' objekts-pozīcija ” īpašums. ' 100 pikseļi ” ir horizontālā virzienā pievienotā atstarpe un „ 20 pikseļi ” vertikālei.
- Tālāk “ atslēgvārdu vērtības ' ir atlasīta klase un atslēgvārda vērtība ' pa kreisi ” tiek nodrošināts objekts-pozīcija ” rekvizītu, lai izlīdzinātu attēlu pa kreisi.
- Pēc tam iekšpusē ' ” tagā tiek izveidoti divi attēli, un tiem tiek piešķirtas iepriekš izveidotās klases.

Pēc apkopošanas posma beigām tīmekļa lapa izskatās šādi:

Momentuzņēmums parāda, ka attēli tagad ir iestatīti noteiktās pozīcijās.

Secinājums

Attēla pozīciju var iestatīt, izmantojot CSS ' peldēt ' un ' objekts-pozīcija ” īpašības. ' peldēt ” rekvizīts izmanto atslēgvārdu kā vērtību un pārvieto elementu pa kreisi vai pa labi. No otras puses, “ objekts-pozīcija ”, ņem gan atslēgvārdu, gan skaitliskās vērtības horizontālā un vertikālā virzienā. Šajā rakstā ir parādīta procedūra attēla pozīcijas iestatīšanai CSS.

Kā iestatīt attēla pozīciju CSS?