Šis raksts parāda pareizo div līdzināšanu ar praktiskiem piemēriem, izmantojot CSS.
- Kā pareizi izlīdzināt div, izmantojot CSS?
- Izmantojot rekvizītu “pludiņš”.
- “Pareizā” īpašuma izmantošana
- Flex Layout izmantošana
- Režģa izkārtojuma izmantošana
Kā pareizi izlīdzināt div, izmantojot CSS?
Izstrādātājs var pareizi līdzināt katru div elementu vai attēlu, lai padarītu vietni pievilcīgāku. Pateicoties to augstajai elastībai, div elementus tīmekļa lapā var izmantot vairākos veidos, piemēram, definējot lapas sadaļas, veidojot kolonnas un iesaiņojot saistītā satura kopas.
Izpildiet tālāk norādītās metodes, lai izlīdzinātu div pa labi:
1. metode. Īpašuma “pludiņš” izmantošana
HTML failā izveidojiet div un piešķiriet tam klasi ' izlīdzināt pa labi ”. Šī klase un div tiek izmantoti visā šajā rakstā.
< div klasē = 'līdzināt pa labi' >
< lpp > Šis ir kāds saturs. < / lpp >
< / div >
Tagad atlasiet šo div klasi ' izlīdzināt pa labi ” un piešķiriet CSS rekvizītus. Šīs īpašības tiek izmantotas labākai vizualizācijai:
.izlīdzināt pa labi {
pludiņš: pa labi;
polsterējums: 10 pikseļi;
fons- krāsa : Koši rozā;
}
Iepriekš minētajā kodā ' peldēt ” īpašums ir iestatīts pa labi. Tas peld vai pārvieto div pareizajā virzienā tīmekļa lapā. Polsterējuma un fona krāsas rekvizīti ir iestatīti uz “ 10 pikseļi ' un ' Koši rozā ” attiecīgi.
Pēc iepriekš minētā koda fragmenta apkopošanas tīmekļa lapa izskatās šādi:
Iepriekš minētā izvade apstiprina, ka div virzās pareizajā virzienā.
2. metode: “pareizā” rekvizīta izmantošana
CSS atlasiet div klasi un iestatiet “ pa labi ” rekvizītu uz 0. Tas nodrošina, ka atlasītā div attālums no labās puses ir vienāds ar nulli. Pēc tam iestatiet “ pozīciju 'īpašums uz ' absolūts ”, lai div pozīcija būtu fiksēta. Visbeidzot, labākai vizualizācijai izmantojiet dažas stila īpašības:
.izlīdzināt pa labi{
pa labi: 0 ;
pozīcija: absolūta;
polsterējums: 10 pikseļi;
fons- krāsa : vidēji violets;
}
Pēc koda izpildes tīmekļa lapa izskatās šādi:
Izvade parāda, ka div tagad ir līdzināts pa labi.
3. metode: Flex Layout izmantošana
Flex ir visefektīvākā metode, un tā saglabā izkārtojumu loga izmēru maiņas laikā. Div var tikt līdzināts pa labi, izmantojot CSS ' Elastīgs izkārtojums ” īpašības. Flex izkārtojumā ir daudz rekvizītu dažādiem mērķiem.
HTML failā izveidojiet vecāku div un tā iekšpusē izveidojiet divus brāļus div. Piešķiriet arī katram div unikālu klasi:
< div klasē = 'līdzināt pa labi' >< div klasē = 'līdzināts pa kreisi' >
< lpp > Tas ir vēl daži saturu .< / lpp >
< / div >
< div klasē = 'līdzināts pa labi' >
< h1 >Sveiki no Linuxhint < / h1 >
< / div >
< / div >
Tagad iekšā
displejs: flex;
attaisnot - saturu : atstarpe starp;
}
.līdzināts pa labi {
align-self: flex-end;
polsterējums: 10 pikseļi;
fons- krāsa : vidēji violets;
}
Iepriekš minētajā kodā
- Piešķirt ' flex ” un “atstarpe starp” vērtībām uz “ displejs ' un ' attaisnot-saturs ” īpašības, attiecīgi. Šīs īpašības padara div elementu elastīgu un nodrošina vienādu atstarpi starp pakārtotajiem elementiem.
- ' izlīdzināt-paši 'īpašums ir iestatīts uz ' flex-end ”, kas liek tai izlīdzināt konteinera labo pusi.
Pēc iepriekš minētā koda izpildes tīmekļa lapa izskatās šādi:
Izvade parāda, ka div ir labi līdzināts, izmantojot elastīgo izkārtojumu.
4. metode: režģa izkārtojuma izmantošana
Režģa izkārtojumu var izmantot arī, lai pa labi izlīdzinātu div. HTML koda struktūra paliek nemainīga:
.izlīdzināt pa labi {displejs: režģis;
režģis-veidne-kolonnas: atkārtojiet ( 2 , 1fr ) ;
}
.līdzināts pa labi {
režģis-kolonna- sākt : 2 ;
polsterējums: 10 pikseļi;
fons- krāsa : zilganzaļa;
}
Koda apraksts ir sniegts zemāk:
- Vispirms atlasiet vecāku div klasi ' .izlīdzināt pa labi un iestatiet savu displejs 'īpašums uz ' režģis ”.
- Pēc tam izveidojiet divas vienāda izmēra kolonnas, izmantojot “ režģis-veidne-kolonnas ' iestatīts uz ' atkārtot (2, 1 fr) ”.
- Beigās atlasiet bērnu div klasi ' .līdzināts pa labi un iestatiet režģis-kolonna-sākums ” rekvizītu uz 2. Šis rekvizīts sāk elementu no otrās kolonnas, t.i., no labās puses.
Pēc iepriekš minētā koda izpildīšanas tīmekļa lapa izskatās šādi:
Izvade parāda, ka divzīme tagad ir līdzināta pa labi, izmantojot “ režģis ” izkārtojuma īpašības.
Secinājums
Lai izlīdzinātu div pareizajā virzienā, izmantojiet ' peldēt ”, “ pa labi ”, “ elastīgs izkārtojums ', un ' režģa izkārtojums ” īpašības. ' peldēt ” rekvizītu kopas pa labi, piešķirot vērtību ” 0 pikseļi ”. Priekš ' flex ”, iestatiet displeju elastīgu un izmantojiet izlīdzināt-paši ' īpašums uz ' flex-end ”. Izmantojot režģa rekvizītu, izveidojiet divas vienāda izmēra kolonnas un lieciet atvasinātajam div sākt no otrās kolonnas.