ఈ కథనం CSSని ఉపయోగించి ఆచరణాత్మక ఉదాహరణలతో div యొక్క సరైన అమరికను ప్రదర్శిస్తుంది.
- CSSని ఉపయోగించి డివిని రైట్ ఎలైన్ చేయడం ఎలా?
- 'ఫ్లోట్' ప్రాపర్టీని ఉపయోగించడం
- 'కుడి' ఆస్తిని ఉపయోగించడం
- ఫ్లెక్స్ లేఅవుట్ ఉపయోగించడం
- గ్రిడ్ లేఅవుట్ ఉపయోగించడం
CSSని ఉపయోగించి డివిని రైట్ ఎలైన్ చేయడం ఎలా?
వెబ్‌సైట్‌ను మరింత ఆకర్షణీయంగా చేసే విధంగా డెవలపర్ ప్రతి డివి ఎలిమెంట్ లేదా ఇమేజ్‌ని సరిగ్గా సమలేఖనం చేయవచ్చు. వాటి అధిక సౌలభ్యం కారణంగా, వెబ్ పేజీలో పేజీ విభాగాలను నిర్వచించడం, నిలువు వరుసలను సృష్టించడం మరియు సంబంధిత కంటెంట్ యొక్క సెట్‌లను చుట్టడం వంటి అనేక మార్గాల్లో div మూలకాలు ఉపయోగించబడతాయి.
divని కుడి-సమలేఖనం చేయడానికి క్రింది పద్ధతులను అనుసరించండి:
విధానం 1: 'ఫ్లోట్' ప్రాపర్టీని ఉపయోగించడం
HTML ఫైల్‌లో, ఒక divని సృష్టించండి మరియు దానికి '' యొక్క తరగతిని కేటాయించండి సమలేఖనం-నుండి-కుడి ”. ఈ క్లాస్ మరియు డివి ఈ ఆర్టికల్ అంతటా ఉపయోగించబడ్డాయి.
< div తరగతి = 'కుడివైపుకు సమలేఖనం' >
< p > ఇది కొంత కంటెంట్. < / p >
< / div >
ఇప్పుడు, ఆ DIV తరగతిని ఎంచుకోండి ' సమలేఖనం-నుండి-కుడి ” మరియు CSS లక్షణాలను కేటాయించండి. ఈ లక్షణాలు మెరుగైన విజువలైజేషన్ కోసం ఉపయోగించబడతాయి:
.సమలేఖనం-నుండి-కుడి {
ఫ్లోట్: కుడి;
పాడింగ్: 10px;
నేపథ్య- రంగు : హాట్‌పింక్;
}
పై కోడ్‌లో, ' తేలుతుంది ”ఆస్తి కుడివైపుకి సెట్ చేయబడింది. ఇది వెబ్‌పేజీలో divని సరైన దిశలో తేలుతుంది లేదా కదిలిస్తుంది. పాడింగ్ మరియు బ్యాక్‌గ్రౌండ్-కలర్ లక్షణాలు 'కి సెట్ చేయబడ్డాయి 10px 'మరియు' హాట్‌పింక్ ” వరుసగా.
ఎగువ కోడ్ స్నిప్పెట్‌ను కంపైల్ చేసిన తర్వాత, వెబ్‌పేజీ ఇలా కనిపిస్తుంది:
పై అవుట్‌పుట్ div సరైన దిశలో కదులుతుందని నిర్ధారిస్తుంది.
విధానం 2: 'కుడి' ఆస్తిని ఉపయోగించడం
CSSలో, div తరగతిని ఎంచుకుని, “ని సెట్ చేయండి కుడి ” లక్షణం 0కి. ఇది కుడి వైపు నుండి ఎంచుకున్న div యొక్క దూరం సున్నాకి సమానం అని నిర్ధారిస్తుంది. అప్పుడు, 'ని సెట్ చేయండి స్థానం 'ఆస్తి' సంపూర్ణ ” div స్థానం స్థిరంగా చేయడానికి. ముగింపులో, మెరుగైన విజువలైజేషన్ కోసం కొన్ని స్టైలింగ్ లక్షణాలను వర్తింపజేయండి:
.సమలేఖనం-నుండి-కుడి{
కుడి: 0 ;
స్థానం: సంపూర్ణ;
పాడింగ్: 10px;
నేపథ్య- రంగు : మీడియం పర్పుల్;
}
కోడ్‌ని అమలు చేసిన తర్వాత వెబ్‌పేజీ ఇలా కనిపిస్తుంది:
div ఇప్పుడు కుడి-సమలేఖనం చేయబడిందని అవుట్‌పుట్ చూపిస్తుంది.
విధానం 3: ఫ్లెక్స్ లేఅవుట్ ఉపయోగించడం
ఫ్లెక్స్ అనేది అత్యంత ప్రభావవంతమైన పద్ధతి, మరియు ఇది విండో పునఃపరిమాణం సమయంలో లేఅవుట్‌ను నిర్వహిస్తుంది. CSS ఉపయోగించి div కుడి-సమలేఖనం చేయవచ్చు ' ఫ్లెక్స్ లేఅవుట్ 'గుణాలు. ఫ్లెక్స్ లేఅవుట్ వివిధ ప్రయోజనాల కోసం అనేక లక్షణాలను కలిగి ఉంది.
HTML ఫైల్‌లో పేరెంట్ డివిని సృష్టించండి మరియు దాని లోపల ఇద్దరు సిబ్లింగ్ డివిలను సృష్టిస్తుంది. అలాగే, ప్రతి డివికి ఒక ప్రత్యేక తరగతిని కేటాయించండి:
< div తరగతి = 'కుడివైపుకు సమలేఖనం' >< div తరగతి = 'ఎడమ సమలేఖనం' >
< p > ఇది మరికొన్ని విషయము .< / p >
< / div >
< div తరగతి = 'కుడి సమలేఖనం' >
< h1 > Linuxhint నుండి హలో < / h1 >
< / div >
< / div >
ఇప్పుడు లోపల ' <శైలి> 'ట్యాగ్ క్రింది CSS లక్షణాలను జోడించండి:
.సమలేఖనం-నుండి-కుడి {ప్రదర్శన: ఫ్లెక్స్;
న్యాయంచేయటానికి- విషయము : స్పేస్-మధ్య;
}
.కుడి-సమలేఖనం {
align-self: flex-end;
పాడింగ్: 10px;
నేపథ్య- రంగు : మీడియం పర్పుల్;
}
పై కోడ్‌లో,
- కేటాయించవచ్చు ' ఫ్లెక్స్ ' మరియు 'స్పేస్-మధ్య' విలువలు ' ప్రదర్శన 'మరియు' జస్టిఫై-కంటెంట్ ” లక్షణాలు, వరుసగా. ఈ లక్షణాలు divని ఒక ఫ్లెక్స్‌గా చేస్తాయి మరియు పిల్లల divల మధ్య సమాన అంతరాన్ని ఉంచుతాయి.
- ది ' align-self 'ఆస్తి సెట్ చేయబడింది' flex-end ”, ఇది కంటైనర్ యొక్క కుడి వైపుకు సమలేఖనం చేయడానికి కారణమవుతుంది.
పై కోడ్ వెబ్‌పేజీని అమలు చేసిన తర్వాత ఇలా కనిపిస్తుంది:
ఫ్లెక్స్ లేఅవుట్ ఉపయోగించి div సరిగ్గా సమలేఖనం చేయబడిందని అవుట్‌పుట్ చూపిస్తుంది.
విధానం 4: గ్రిడ్ లేఅవుట్ ఉపయోగించడం
గ్రిడ్ లేఅవుట్ divని కుడి-సమలేఖనం చేయడానికి కూడా ఉపయోగించబడుతుంది. HTML కోడ్ నిర్మాణం అలాగే ఉంటుంది:
.సమలేఖనం-నుండి-కుడి {ప్రదర్శన: గ్రిడ్;
గ్రిడ్-టెంప్లేట్-నిలువు వరుసలు: పునరావృతం ( 2 , 1fr ) ;
}
.కుడి-సమలేఖనం {
గ్రిడ్ కాలమ్- ప్రారంభించండి : 2 ;
పాడింగ్: 10px;
నేపథ్య- రంగు : టీల్;
}
కోడ్ యొక్క వివరణ క్రింద ఇవ్వబడింది:
- ముందుగా, పేరెంట్ డివి క్లాస్‌ని ఎంచుకోండి ' .సమలేఖనం-నుండి-కుడి 'మరియు దాని'ని సెట్ చేయండి ప్రదర్శన 'ఆస్తి' గ్రిడ్ ”.
- ఆపై, '' ఉపయోగించి సమాన పరిమాణంతో రెండు నిలువు వరుసలను సృష్టించండి గ్రిడ్-టెంప్లేట్-నిలువు వరుసలు 'గా సెట్ చేయబడింది' పునరావృతం (2, 1fr) ”.
- చివరికి, చైల్డ్ డివి క్లాస్‌ని ఎంచుకోండి ' .కుడి-సమలేఖనం 'మరియు' సెట్ చేయండి గ్రిడ్-కాలమ్-ప్రారంభం ”ప్రాపర్టీకి 2. ఈ ప్రాపర్టీ మూలకాన్ని రెండవ నిలువు వరుస నుండి అంటే కుడి వైపు నుండి ప్రారంభిస్తుంది.
పై కోడ్‌ని అమలు చేసిన తర్వాత, వెబ్‌పేజీ ఇలా కనిపిస్తుంది:
'ని ఉపయోగించి div ఇప్పుడు సరిగ్గా సమలేఖనం చేయబడిందని అవుట్‌పుట్ వివరిస్తుంది గ్రిడ్ ” లేఅవుట్ లక్షణాలు.
ముగింపు
divని సరైన దిశలో సమలేఖనం చేయడానికి, ' తేలుతుంది ',' కుడి ',' ఫ్లెక్స్ లేఅవుట్ ', మరియు' గ్రిడ్ లేఅవుట్ 'గుణాలు. ది ' తేలుతుంది 'విలువను కేటాయించడం ద్వారా ఆస్తి కుడివైపుకి సెట్ చేయబడుతుంది' 0px ”. కొరకు ' ఫ్లెక్స్ ” ఆస్తి, డిస్‌ప్లేను ఫ్లెక్స్ చేయడానికి సెట్ చేయండి మరియు ఉపయోగించండి align-self 'ఆస్తి' flex-end ”. గ్రిడ్ ప్రాపర్టీని ఉపయోగించి, రెండు సమాన పరిమాణ నిలువు వరుసలను తయారు చేయండి మరియు రెండవ నిలువు వరుస నుండి చైల్డ్ డివిని ప్రారంభించేలా చేయండి.