ఈ వ్యాసంలో, మేము పేర్కొన్న ప్రతి విధానాలను ఒక్కొక్కటిగా చర్చిస్తాము మరియు ప్రతి పద్ధతికి తగిన ఉదాహరణను అందిస్తాము.
కాబట్టి, ప్రారంభిద్దాం!
విధానం 1: గ్రిడ్‌ని ఉపయోగించి CSSలో రెండు డివైస్‌లను పక్కపక్కనే ఉంచండి
CSS' గ్రిడ్ ” లేఅవుట్ వినియోగదారుని రెండు లేదా అంతకంటే ఎక్కువ రెండు డివిలను పక్కపక్కనే ఉంచడానికి అనుమతిస్తుంది. ప్రాథమికంగా, గ్రిడ్ అనేది అడ్డు వరుసలు మరియు నిలువు వరుసలతో కూడిన లేఅవుట్‌ను రూపొందించడానికి ఉపయోగించే డిస్ప్లే ప్రాపర్టీ యొక్క విలువ.
వాక్యనిర్మాణం
గ్రిడ్ లేఅవుట్‌తో డిస్ప్లే ప్రాపర్టీ యొక్క సింటాక్స్ క్రింద ఇవ్వబడింది:
ప్రదర్శన: గ్రిడ్
ఇప్పుడు, గ్రిడ్ లేఅవుట్‌ని ఉపయోగించి CSSలో రెండు డివిలను పక్కపక్కనే ఉంచడానికి సంబంధించిన ఉదాహరణను చూద్దాం.
ఉదాహరణ
ఇక్కడ, మేము పేరెంట్ డివి లోపల రెండు చైల్డ్ డివిలను సృష్టిస్తాము, '' తల్లిదండ్రులు ',' బిడ్డ 'మరియు' బిడ్డ ”:
< div తరగతి = 'తల్లిదండ్రులు' >< div తరగతి = 'పిల్ల' >< / div >
< div తరగతి = 'పిల్ల' >< / div >
< / div >
CSS విభాగంలో తదుపరి, “ని ఉపయోగించండి .తల్లిదండ్రులు ” పేరెంట్ డివిని యాక్సెస్ చేయడానికి మరియు డిస్ప్లే ప్రాపర్టీ విలువను ఇలా సెట్ చేయడానికి గ్రిడ్ ”. తరువాత, “ని ఉపయోగించి భిన్నాన్ని సెట్ చేయండి గ్రిడ్-టెంప్లేట్-నిలువు వరుసలు నిలువు వరుసల కోసం స్థలాన్ని సృష్టించడానికి ఆస్తి. మా విషయంలో, మేము భిన్నాలను ఇలా సెట్ చేస్తాము 1fr 'మరియు' 1fr ”, అంటే రెండు divలు సమాన స్థలాన్ని పొందాయి. ఇంకా, మేము కాలమ్-గ్యాప్ ప్రాపర్టీని ఉపయోగించి రెండు నిలువు వరుసల మధ్య అంతరాన్ని సెట్ చేస్తాము మరియు దాని విలువను “ 25px ”.
CSS:
.తల్లిదండ్రులు {ప్రదర్శన : గ్రిడ్ ;
గ్రిడ్-టెంప్లేట్-నిలువు వరుసలు : 1fr 1fr ;
కాలమ్-గ్యాప్ : 25px ;
}
తదుపరి దశలో, మేము ఉపయోగిస్తాము ' .బిడ్డ ” చైల్డ్ డివివ్ రెండింటినీ యాక్సెస్ చేయడానికి మరియు డివైస్‌ల ఎత్తును ఇలా సెట్ చేయండి 250px 'మరియు నేపథ్య రంగును' గా సెట్ చేయండి rgb(253, 5, 109) ”:
.బిడ్డ {ఎత్తు : 250px ;
నేపథ్య : rgb ( 253 , 5 , 109 ) ;
}
ఇది క్రింది ఫలితాన్ని చూపుతుంది:
డివిని పక్కపక్కనే ఉంచడానికి మరొక పద్ధతికి వెళ్దాం
విధానం 2: ఫ్లెక్స్‌ని ఉపయోగించి CSSలో రెండు డివైస్‌లను పక్కపక్కనే ఉంచండి
ది ' ఫ్లెక్స్ ” అనేది రెండు డివిలను పక్కపక్కనే ఉంచడానికి అనుమతించే డిస్ప్లే ప్రాపర్టీ విలువ. ఫ్లెక్సిబుల్ ఐటెమ్ కోసం ఫ్లెక్సిబుల్ లెంగ్త్ సెట్ చేయడానికి ఈ ప్రాపర్టీ ఉపయోగించబడుతుంది. ఇది దాని కంటైనర్‌లో సరిపోయేలా ఫ్లెక్స్ ఐటెమ్‌ను కుదిస్తుంది లేదా పెంచుతుంది.
వాక్యనిర్మాణం
ఫ్లెక్స్‌తో డిస్ప్లే ప్రాపర్టీ యొక్క సింటాక్స్ క్రింద ఇవ్వబడింది:
ప్రదర్శన: ఫ్లెక్స్;పేర్కొన్న భావనను అర్థం చేసుకోవడానికి ఉదాహరణకి వెళ్దాం.
ఉదాహరణ
మేము అదే HTML ఫైల్‌ను పరిగణించి, వర్తింపజేస్తాము ' ఫ్లెక్స్ ” పేరెంట్ కంటైనర్‌కి. ఇక్కడ, మేము డిస్ప్లే ప్రాపర్టీ విలువను ఫ్లెక్స్‌గా సెట్ చేస్తాము మరియు చైల్డ్ డివ్‌ల మధ్య గ్యాప్‌ని ఇలా సెట్ చేస్తాము “ 10px ”:
.తల్లిదండ్రులు {ప్రదర్శన : ఫ్లెక్స్ ;
అంతరం : 10px ;
}
ఆ తర్వాత, div యొక్క వెడల్పు, ఎత్తు మరియు నేపథ్య రంగును ఇలా సెట్ చేయండి 650px ',' 200px ”, మరియు 'rgb(0, 255, 42) ”, వరుసగా:
.బిడ్డ {వెడల్పు : 650px ;
ఎత్తు : 200px ;
నేపథ్య : rgb ( 0 , 255 , 42 ) ;
}
ఇచ్చిన కోడ్ యొక్క ఫలితం క్రింద ఇవ్వబడింది:
విధానం 3: ఫ్లోట్‌ని ఉపయోగించి CSSలో రెండు డివైస్‌లను పక్కపక్కనే ఉంచండి
CSS ఫ్లోట్ ప్రాపర్టీ ఒక మూలకం యొక్క ఫ్లోటింగ్ దిశను నిర్దేశిస్తుంది. మరింత ప్రత్యేకంగా, CSSలో రెండు divలను పక్కపక్కనే ఉంచడానికి ఈ ప్రాపర్టీని ఉపయోగించవచ్చు.
వాక్యనిర్మాణం
ఫ్లోట్ ప్రాపర్టీ యొక్క సింటాక్స్:
ఫ్లోట్: ఏదీ లేదు|ఎడమ|కుడిపైన ఇచ్చిన విలువల వివరణ ఇక్కడ ఉంది:
- ఏదీ లేదు: ఇది ఫ్లోటింగ్‌ను పరిమితం చేయడానికి ఉపయోగించబడుతుంది.
- ఎడమ: ఇది ఎడమ వైపున ఎలిమెంట్లను ఫ్లోట్ చేయడానికి ఉపయోగించబడుతుంది.
- కుడి: ఇది కుడి వైపున ఉన్న మూలకాలను ఫ్లోట్ చేయడానికి ఉపయోగించబడుతుంది.
డివిని పక్కపక్కనే ఉంచే ఉదాహరణకి వెళ్దాం.
ఉదాహరణ
ఇప్పుడు, మేము
ట్యాగ్ లోపల రెండు divలను సృష్టిస్తాము మరియు తరగతి పేరును “ div1 'మరియు' div2 ”: < శరీరం >< div తరగతి = 'div1' >< / div >
< div తరగతి = 'div2' >< / div >
< / శరీరం >
అప్పుడు, ఉపయోగించండి ' .div1 'మరియు' .div2 ” HTML విభాగంలో జోడించిన కంటైనర్‌లను యాక్సెస్ చేయడానికి. మేము రెండింటికీ కేటాయించబోయే లక్షణాలు మరియు విలువలు ఒకేలా ఉన్నందున మేము ఒకే తరగతిలో రెండు divలను ఉపయోగిస్తాము.
తర్వాత, మేము ఫ్లోట్ ప్రాపర్టీ విలువను ఇలా కేటాయిస్తాము వదిలేశారు ” మరియు div యొక్క వెడల్పు మరియు ఎత్తును ఇలా సెట్ చేయండి యాభై% 'మరియు' 40% ”. మేము బాక్స్-సైజింగ్ ప్రాపర్టీని కూడా ఉపయోగిస్తాము మరియు దాని విలువను ఇలా సెట్ చేసాము ' సరిహద్దు పెట్టె ”. ఇంకా, div యొక్క నేపథ్య రంగును ''గా సెట్ చేయండి rgb(7, 255, 222) 'మరియు సరిహద్దు ఆస్తి విలువలను ఇలా సెట్ చేయండి' 3px ',' ఘనమైన ', మరియు' rgb(255, 0, 255) ”:
.div1 , .div2 {తేలుతుంది : వదిలేశారు ;
వెడల్పు : యాభై% ;
ఎత్తు : 40% ;
పెట్టె పరిమాణం : సరిహద్దు పెట్టె ;
నేపథ్య : rgb ( 7 , 255 , 222 ) ;
సరిహద్దు : 3px ఘనమైన rgb ( 255 , 0 , 255 ) ;
}
గమనిక: మీరు divs యొక్క విభిన్న నేపథ్య రంగులను సెట్ చేయడం ద్వారా బాక్స్-సైజింగ్ ప్రాపర్టీ మరియు బార్డర్ ప్రాపర్టీని ఉపయోగించకుండా రెండు divలను పక్కపక్కనే ఉంచవచ్చు.
మీరు పై కోడ్‌ని అమలు చేసిన తర్వాత, HTML ఫైల్‌ని అమలు చేసి, ఫలితాన్ని చూడండి:
గమనిక: రెండు divల మధ్య ఖాళీని సృష్టించడానికి, ముందుగా మరొక divని సృష్టించి, ఆపై div యొక్క మార్జిన్‌ను తదనుగుణంగా సెట్ చేయండి.
ముగింపు
CSS యొక్క మూడు విభిన్న పద్ధతులను ఉపయోగించడం ద్వారా Divలను పక్కపక్కనే ఉంచవచ్చు, అవి ' ఫ్లెక్స్ 'మరియు' గ్రిడ్ 'ప్రదర్శన ఆస్తి విలువలు మరియు' తేలుతుంది ”ఆస్తి. ప్రతి పద్ధతులు సమర్థవంతంగా పనిచేస్తాయి; అయినప్పటికీ, మీరు మా అవసరాలకు అనుగుణంగా వాటిలో దేనినైనా ఉపయోగించవచ్చు. ఈ గైడ్‌లో, మేము CSSని ఉపయోగించి డివిని పక్కపక్కనే ఉంచడానికి మూడు పద్ధతులను చర్చించాము మరియు సంబంధిత ఉదాహరణలను అందించాము.