అనేక సంవత్సరాలు, CSS తేలియాడే వెబ్సైట్ లేఅవుట్లను సృష్టించడంలో ఒక finicky, ఇంకా అవసరం, భాగం ఉన్నాయి. మీ డిజైన్ బహుళ నిలువరుసలకు పిలిచినట్లయితే, మీరు తేలియాడుతూనే ఉంటారు . ఈ పద్ధతిలో సమస్య ఏమిటంటే, వెబ్ సైట్ డిజైనర్లు / డెవలపర్లు క్లిష్టమైన సైట్ లు సృష్టించడం చూపించినప్పటికీ, CSS తేలు నిజంగా ఈ విధంగా ఉపయోగించబడదు.
తేలియాడే మరియు CSS స్థానాలు రాబోయే అనేక సంవత్సరాల్లో వెబ్ డిజైన్లో చోటు చేసుకున్నట్లు ఖచ్చితంగా ఉన్నాయి, CSS గ్రిడ్ మరియు ఫ్లెక్స్బాక్స్తో సహా కొత్త లేఅవుట్ పద్ధతులు ఇప్పుడు వెబ్ సైట్ రూపకర్తలకు వారి సైట్ లేఅవుట్లను రూపొందించడానికి కొత్త మార్గాలను అందిస్తున్నాయి. సంభావ్య మా చూపిస్తుంది మరొక కొత్త లేఅవుట్ టెక్నిక్ CSS బహుళ కాలమ్ ఉంది.
CSS కాలమ్స్ ఇప్పుడు కొన్ని సంవత్సరాలు చుట్టూ ఉన్నాయి, కానీ పాత బ్రౌజర్లలో (ప్రధానంగా ఇంటర్నెట్ ఎక్స్ప్లోరర్ యొక్క పాత వెర్షన్లు) మద్దతు లేకపోవడం చాలామంది వెబ్ నిపుణులను వారి ఉత్పత్తి పనిలో ఈ శైలులను ఉపయోగించకుండా ఉంచింది.
IE యొక్క ఆ పాత సంస్కరణలకు మద్దతు ముగింపులో, కొందరు వెబ్ డిజైనర్లు ఇప్పుడు కొత్త CSS లేఅవుట్ ఎంపికలతో ప్రయోగాలు చేస్తున్నారు, CSS కాలమ్లు కూడా ఉన్నాయి మరియు వారు తేలియాడుతూ ఉన్నదాని కంటే ఈ నూతన విధానాలతో మరింత ఎక్కువ నియంత్రణను కలిగి ఉన్నారని కనుగొన్నారు.
CSS కాలమ్ యొక్క బేసిక్స్
దాని పేరు సూచించినట్లుగా, CSS బహుళ నిలువు వరుసలు (CSS3 బహుళ కాలమ్ లేఅవుట్ అని కూడా పిలుస్తారు) మీరు నిలువు వరుసల సంఖ్యను స్ప్లిట్ చేయడానికి మిమ్మల్ని అనుమతిస్తుంది. మీరు ఉపయోగించే ప్రాథమిక CSS లక్షణాలు:
- కాలమ్-లెక్కింపు
- కాలమ్ గ్యాప్
నిలువు-గణన కోసం, మీకు కావలసిన నిలువు వరుసల సంఖ్యను పేర్కొనండి. కాలమ్ గ్యాప్ ఆ నిలువు మధ్య గట్టర్లను లేదా అంతరం ఉంటుంది. బ్రౌజర్ ఈ విలువలను తీసుకొని, మీరు పేర్కొన్న నిలువు వరుసల సంఖ్యలో సమానంగా కంటెంట్ను విభజించవచ్చు.
సాధనలో బహుళ బహుళ నిలువు వరుసల యొక్క ఒక సాధారణ ఉదాహరణ, ఒక వార్తాపత్రిక వ్యాసంలో మీరు చూసేదానికి సమానంగా, బహుళ నిలువు వరుసల్లో టెక్స్ట్ కంటెంట్ను బ్లాక్ చేస్తుంది. మీరు ఈ కింది HTML మార్కప్ను కలిగి ఉన్నారని చెపుతారు (ఉదాహరణ ప్రయోజనాల కోసం నేను ఒక పేరా యొక్క ప్రారంభాన్ని మాత్రమే తెలపడం గమనించండి, ఆచరణలో ఈ మార్కప్లోని కంటెంట్ యొక్క బహుళ పేరాలు ఉండవచ్చు):
మీ వ్యాసం యొక్క శీర్షిక
ఇక్కడ వచనం యొక్క అనేక పేరాలు ఇమాజిన్ ...
మీరు ఈ CSS శైలులను రాసినట్లయితే:
.content {-moz-column-count: 3; -webkit-column-count: 3; కాలమ్-కౌంట్: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; నిలువు ఖాళీ: 30px; }ఈ CSS నియమం "కంటెంట్" విభాగాన్ని 3 సమాన నిలువు వరుసలలో విభజించి, వాటి మధ్య 30 పిక్సెల్స్ అంతరాన్ని కలిగి ఉంటుంది. మీరు 3 ని బదులుగా రెండు నిలువు వరుసలను కోరుకుంటే, మీరు కేవలం ఆ విలువను మార్చుకోవచ్చు మరియు బ్రౌసర్ ఆ స్తంభాల యొక్క కొత్త వెడల్పులను సమానంగా కంటెంట్ను విభజించడానికి లెక్కించబడుతుంది. మొదట విక్రేత-ప్రిఫిక్డ్ ఆస్తులను వాడతామని గమనించండి, ఆ తరువాత ప్రత్యామ్నాయ డిక్లరేషన్లు.
ఇది చాలా సులభం, ఈ విధంగా దాని ఉపయోగం వెబ్సైట్ ఉపయోగం కోసం ప్రశ్నార్థకం. అవును, మీరు ఒక సమూహ కంటెంట్ను బహుళ నిలువు వరుసలుగా విభజించవచ్చు, కానీ ఈ నిలువు వరుసల ఎత్తు స్క్రీన్ యొక్క "మడత" కంటే తక్కువగా ఉంటే, ఇది వెబ్కు ఉత్తమ పఠన అనుభవం కాకపోవచ్చు.
పూర్తి పాఠాన్ని చదవడానికి పాఠకులు పైకి క్రిందికి స్క్రోల్ చేయవలసి ఉంటుంది. అయినప్పటికీ, CSS నిలువు వరుసల యొక్క ప్రధాన భాగం మీరు ఇక్కడ చూస్తున్నంత సులభం, మరియు అది కొన్ని పేరాల కంటెంట్ను విభజించడం కంటే చాలా ఎక్కువగా చేయటానికి ఉపయోగించబడుతుంది - ఇది నిజంగా లేఅవుట్ కోసం ఉపయోగించబడుతుంది.
CSS లు తో లేఅవుట్
కంటెంట్ యొక్క 3 నిలువువరుస కలిగిన కంటెంట్ ప్రాంతంతో మీకు వెబ్పేజీ ఉందని చెప్పండి. ఇది చాలా విలక్షణ వెబ్సైట్ లేఅవుట్, మరియు ఆ 3 నిలువు వరుసలను సాధించడానికి, మీరు సాధారణంగా విభాగాలను ఫ్లోట్ చేస్తుంది. CSS బహుళ నిలువు వరుసలతో ఇది చాలా సులభం.
ఇక్కడ కొన్ని నమూనా HTML:
తాజా వార్తలు
కంటెంట్ ఇక్కడకు వెళ్తుంది ...
రాబోయే ఈవెంట్లు
p>
ఈ బహుళ నిలువు వరుసలను చేయడానికి మీరు గతంలో చూసినదానితో మొదలవుతుంది:
.content {-moz-column-count: 3; -webkit-column-count: 3; కాలమ్-కౌంట్: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; నిలువు ఖాళీ: 30px; }ఇప్పుడు, ఇక్కడ ఉన్న సవాలు ఏమిటంటే, బ్రౌజర్ ఈ విషయాన్ని సమానంగా విభజించాలని కోరుకుంటున్నందున, ఈ విభాగాల యొక్క కంటెంట్ పొడవు భిన్నంగా ఉంటే, ఆ బ్రౌజర్ వాస్తవంగా ఒక విభజన యొక్క కంటెంట్ను విభజించి, దాని యొక్క ప్రారంభాన్ని ఒక కాలమ్కు మరొకదానిలో కొనసాగింపు (ఈ ప్రయోగాన్ని అమలు చేయడానికి మరియు ప్రతి డివిజన్లోని కంటెంట్ యొక్క వివిధ పొడవులను జోడించడానికి ఈ కోడ్ను మీరు ఉపయోగించగలరు)!
మీరు కోరుకున్నది కాదు. మీరు ఈ విభాగాలలో ప్రతి ఒక్కదానిని ప్రత్యేకమైన కాలమ్ సృష్టించడానికి మరియు ఎంత పెద్దది లేదా చిన్నదిగా విభజన యొక్క కంటెంట్ అయినా ఉన్నా, మీరు దానిని విడిపోవాలని కోరుకోరు. మీరు ఈ అదనపు CSS ను జోడించడం ద్వారా దీన్ని సాధించవచ్చు:
.content div {display: inline-block; }బ్రౌజర్ ఈ స్తంభాలుగా విభజించినప్పుడు కూడా "కంటెంట్" లోపలి భాగంలో ఉన్న విభాగాలు బలంగా ఉంటాయి. మరింత మంచిది, మేము ఇక్కడ ఒక స్థిర వెడల్పు ఇవ్వడం లేదు నుండి, బ్రౌజర్ ప్రతిస్పందించే వెబ్సైట్లకు ఆదర్శవంతమైన అప్లికేషన్ తయారు, ఈ పునఃపరిమాణం స్వయంచాలకంగా పునఃపరిమాణం చేస్తుంది. ఆ "ఇన్లైన్ బ్లాక్" శైలిలో, మీ 3 డివిజన్లలో ప్రతి ఒక్కటి కంటెంట్ యొక్క ప్రత్యేకమైన కాలమ్ ఉంటుంది.
కాలమ్ వెడల్పుని ఉపయోగించడం
మీరు ఉపయోగించగల "కాలమ్-కౌంట్" తో పాటు మరొక ఆస్తి ఉంది, మరియు మీ లేఅవుట్ అవసరాలను బట్టి, ఇది మీ సైట్కు మంచి ఎంపిక కావచ్చు. ఇది "కాలమ్ వెడల్పు". గతంలో చూపిన విధంగా అదే HTML మార్కప్ ను ఉపయోగించి, మన CSS తో మనం బదులుగా దీన్ని చేయవచ్చు:
.content {-moz-column-width: 500px; -వెబ్కిట్-కాలమ్-వెడల్పు: 500px; కాలమ్ వెడల్పు: 500px; -moz-column-gap: 30px; -webkit-column-gap: 30px; నిలువు ఖాళీ: 30px; } .content div {display: inline-block; }ఈ పని చేసే విధానం ఆ కాలమ్ గరిష్ట విలువగా ఈ "నిలువు-వెడల్పు" ను ఉపయోగిస్తుంది. కాబట్టి బ్రౌజర్ విండో 500 పిక్సెల్స్ వెడల్పు ఉంటే, ఈ 3 విభాగాలు ఒకే కాలమ్లో కనిపిస్తాయి, మరొకటి బల్లల్లో ఒకటి. ఇది మొబైల్ / చిన్న స్క్రీన్ లేఅవుట్లు కోసం ఉపయోగించే ఒక సాధారణ లేఅవుట్.
నిర్దిష్ట వెడల్పు ఖాళీలతో పాటు 2 నిలువు వరుసలను సరిపోయేలా తగినంతగా బ్రౌజర్ వెడల్పు పెరుగుతుంది కాబట్టి, బ్రౌసర్ ఒక్క కాలమ్ లేఅవుట్ నుండి రెండు నిలువు వరుసలకు స్వయంచాలకంగా వెళ్తుంది. స్క్రీన్ వెడల్పు మరియు చివరికి పెరుగుతున్న ఉంచండి, మీరు వారి సొంత కాలమ్ ప్రదర్శించబడుతుంది మా 3 విభాగాలు ప్రతి తో, ఒక 3 కాలమ్ డిజైన్ పొందుతారు. మళ్ళీ, ఈ కొన్ని బాధ్యతాయుతంగా, బహుళ పరికరం స్నేహపూర్వక లేఅవుట్ పొందడానికి ఒక గొప్ప మార్గం, మరియు మీరు కూడా లేఅవుట్ శైలులు మార్చడానికి మీడియా ప్రశ్నలను ఉపయోగించడానికి అవసరం లేదు!
ఇతర కాలమ్ గుణాలు
ఇక్కడ నిండిన లక్షణాలతో పాటుగా, "నిలువు-నియమం" కొరకు లక్షణములు కలవు, శైలి, మరియు వెడల్పు విలువలు మీ నిలువు వరుసల మధ్య నియమాలను సృష్టించుటకు అనుమతించును. మీ నిలువు వరుసలను వేరు చేయాలంటే, సరిహద్దులకి బదులుగా ఇవి ఉపయోగించబడతాయి.
ప్రయోగానికి సమయం
ప్రస్తుతం, CSS బహుళ కాలమ్ లేఅవుట్ బాగా మద్దతు ఉంది. ఉపసర్గలతో, 94% మంది వెబ్ యూజర్లు ఈ శైలులను చూడగలుగుతారు మరియు మద్దతు లేని సమూహం ఇంటర్నెట్ ఎక్స్ప్లోరర్ యొక్క చాలా పాత సంస్కరణలుగా ఉంటుంది, ఇది మీరు ఏమైనా మద్దతు ఇవ్వకపోవచ్చు.
ఇప్పుడు ఈ స్థాయి మద్దతుతో, CSS నిలువులతో ప్రయోగాలు చేయడం మరియు ఉత్పాదన సిద్ధంగా ఉన్న వెబ్సైట్లలో ఈ శైలులను అమర్చడం లేదు. మీరు ఈ వ్యాసంలో సమర్పించిన HTML మరియు CSS ను ఉపయోగించి మీ ప్రయోగాలను ప్రారంభించవచ్చు మరియు మీ సైట్ యొక్క లేఅవుట్ అవసరాల కోసం ఉత్తమంగా పని చేస్తుందో చూడటానికి వివిధ విలువలతో చుట్టూ ప్లే చేయవచ్చు.