CSS ఆస్తి లేఅవుట్ కోసం చాలా ముఖ్యమైన ఆస్తి. ఇది మీరు వాటిని ప్రదర్శించడానికి కావలసిన ఖచ్చితంగా మీ వెబ్ పేజీ నమూనాలు ఉంచడం అనుమతిస్తుంది - కానీ అది ఉపయోగించడానికి మీరు పని ఎలా అర్థం చేసుకోవాలి.
ఒక శైలి షీట్ లో, CSS ఫ్లోట్ ఆస్తి ఈ కనిపిస్తోంది:
.right {float: right; }
ఇది "కుడి" తరగతితో ఉన్న ప్రతిదీ కుడి వైపుకు ఆవిష్కరించబడిందని బ్రౌజర్కు చెబుతుంది.
మీరు దీన్ని ఇచ్చివేస్తారు:
class = "right" />
మీరు CSS ఫ్లోట్ ఆస్తితో ఏమి ఫ్లోట్ చేయవచ్చు?
మీరు వెబ్ పేజీలో ప్రతి అంశాన్ని ఫ్లోట్ చేయలేరు. మీరు బ్లాక్-స్థాయి అంశాలని మాత్రమే తేలుతాయి. ఇవి చిత్రాల (), పేరాలు (), విభాగాలు (), విభాగాలు (), మరియు జాబితాలు () వంటి పేజీలో ఖాళీ స్థలాన్ని స్వీకరించే అంశాలు.
వచనాన్ని ప్రభావితం చేసే ఇతర అంశాలు, కానీ పేజీలో బాక్స్ సృష్టించవద్దు ఇన్లైన్ ఎలిమెంట్స్ అని పిలుస్తారు మరియు అవి ఆవిష్కరించబడవు. ఇవి span (), లైన్ బ్రేక్స్ (), బలమైన ఉద్ఘాటన (), లేదా ఇటాలిక్స్ () వంటి అంశాలే.
ఎక్కడ వారు ఫ్లోట్ చేస్తారా?
మీరు కుడి లేదా ఎడమ అంశాల ఫ్లోట్ చేయవచ్చు. ఆవిష్కరించబడిన మూలకాన్ని అనుసరించే ఏ మూలకం ఇతర వైపున ఆవిష్కరించబడిన మూలకం చుట్టూ ప్రవహిస్తుంది.
ఉదాహరణకు, నేను ఎడమకు ఒక చిత్రం తేలుతూ ఉంటే, ఏదైనా టెక్ట్స్ లేదా దాని తరువాత ఉన్న ఇతర అంశాలు కుడివైపుకి దాని చుట్టూ ప్రవహిస్తాయి. మరియు నేను ఒక చిత్రాన్ని కుడివైపుకు తేలుతే, ఏదైనా టెక్స్ట్ లేదా దాని తరువాత ఉన్న ఇతర అంశాలు ఎడమవైపుకి ప్రవహిస్తాయి. ఇది వర్తించే ఏదైనా ఫ్లోట్ శైలి లేకుండా టెక్స్ట్ యొక్క బ్లాక్లో ఉంచబడిన ఒక చిత్రం చిత్రాలను ప్రదర్శించడానికి సెట్ అయినప్పటికీ ప్రదర్శించబడుతుంది. ఈ చిత్రం యొక్క దిగువ భాగంలో ప్రదర్శించబడిన క్రింది టెక్స్ట్ యొక్క మొదటి పంక్తితో ఇది సాధారణంగా ఉంటుంది.
ఎంత దూరం వారు తేలుతాయి?
ఆవిష్కరించబడిన ఒక మూలకం చాలా వరకు కంటైనర్ మూలకం యొక్క ఎడమ లేదా కుడికి తరలించబడుతుంది. ఇది మీ కోడ్ ఎలా వ్రాయబడింది అనేదానిపై ఆధారపడి విభిన్న పరిస్థితుల్లో ఫలితాలను ఇస్తుంది. ఈ ఉదాహరణలు, నేను ఒక చిన్న తేలుతూ ఉంటాను DIV ఎడమ మూలకం:
- ఆవిష్కరించబడిన మూలకం ముందు నిర్వచించబడిన వెడల్పును కలిగి ఉండకపోతే, ఫ్లోట్తో సంబంధం లేకుండా అవసరమైన మరియు అందుబాటులో ఉన్నట్లుగా ఇది చాలా క్షితిజ సమాంతర స్థలంగా పడుతుంది. గమనిక: కొన్ని బ్రౌజర్లు వెడల్పు నిర్వచించబడనప్పుడు ఆవిష్కృత అంశాల పక్కన అంశాలను ఉంచడానికి ప్రయత్నిస్తాయి-సాధారణంగా ఆవిష్కరించబడిన మూలకం మాత్రమే చిన్న స్థలాన్ని ఇస్తుంది. కాబట్టి మీరు తప్పక ఎల్లప్పుడూ వెడల్పును నిర్వచించండి ఆవిష్కరించబడిన అంశాలపై.
- కంటైనర్ మూలకం ఉంటే HTML మూలకం, ఆవిష్కరించారు
DIVపేజీ యొక్క ఎడమ మార్జిన్లో కూర్చుని ఉంటుంది. - కంటైనర్ మూలకం కూడా ఏదో కలిగి ఉంటే, ఆవిష్కరించారు
DIVకంటైనర్ యొక్క ఎడమ మార్జిన్లో కూర్చుని ఉంటుంది. - గూడు ఎలిమెంట్లను ఆవిష్కరించవచ్చు మరియు ఆశ్చర్యకరమైన స్థలంలో ముగిసే ఫ్లోట్లో ఇది సంభవించవచ్చు. ఉదాహరణకు, ఈ ఫ్లోట్ ఎడమవైపుకు వెయ్యబడింది
DIVకుడివైపు ఆవిష్కరించబడిందిDIV. - కంటైనర్లో గది ఉన్నట్లయితే ఫ్లోట్ చేయబడిన అంశాలు ప్రతి ఇతర పక్కన కూర్చుంటాయి. ఉదాహరణకు, ఈ కంటైనర్ మూడు 100px వెడల్పు కలిగి ఉంది
DIV400px వెడల్పు కంటైనర్లో ఆవిష్కరించబడిన అంశాలు.
మీరు ఒక ఫోటో గ్యాలరీ లేఅవుట్ సృష్టించడానికి తేలియాడులను కూడా ఉపయోగించవచ్చు. మీరు ఒక ప్రతి సూక్ష్మచిత్రం ఉంచండి (వారు అన్ని ఒకే పరిమాణం ఉన్నప్పుడు ఇది ఉత్తమ పనిచేస్తుంది) ఒక DIV శీర్షిక మరియు ఫ్లోట్ తో DIV కంటైనర్లోని అంశాలు. బ్రౌజర్ విండో ఎంత పెద్దదిగా ఉన్నా, సూక్ష్మచిత్రాలు ఏకరీతిలో వరుసలో ఉంటాయి.
ఫ్లోట్ ఆఫ్ టర్నింగ్
ఫ్లోట్ చేయడానికి ఒక అంశాన్ని ఎలా పొందాలో మీకు తెలిసిన తర్వాత, ఫ్లోట్ను ఎలా ఆఫ్ చేయాలో తెలుసుకోవడం ముఖ్యం. మీరు CSS స్పష్టమైన ఆస్తితో ఫ్లోట్ ఆఫ్ చేయండి. మీరు ఎడమ తేలు, కుడి తేలు లేదా రెండింటినీ క్లియర్ చేయవచ్చు:
స్పష్టమైన: ఎడమ;స్పష్టంగా: కుడి;స్పష్టమైన: రెండు;
మీరు స్పష్టమైన ఆస్తిని సెట్ చేసే ఏదైనా మూలకం ఆ దిశలో ఆవిష్కరించబడిన మూలకం క్రింద కనిపిస్తుంది. ఉదాహరణకు, ఈ ఉదాహరణలో టెక్స్ట్ యొక్క మొదటి రెండు పేరాలు క్లియర్ చేయబడలేదు, కానీ మూడవది.
విభిన్న లేఅవుట్ ప్రభావాలను పొందడానికి మీ పత్రాల్లోని వివిధ అంశాల స్పష్టమైన విలువతో ప్లే చేయండి. అత్యంత ఆసక్తికరంగా ఆవిష్కరించబడిన లేఅవుల్లో ఒకటి, పేరాగ్రాఫ్ల పక్కన కుడి లేదా ఎడమ కాలమ్లో చిత్రాల శ్రేణి. వచనం పైకి స్క్రోల్ చేయటానికి పొడవుగా ఉండక పోయినప్పటికీ, మీరు అన్ని చిత్రాలపై స్పష్టంగా ఉపయోగించగలరు, మునుపటి చిత్రం పక్కన కాకుండా వారు కాలమ్లో కనిపిస్తారని నిర్ధారించుకోవచ్చు.
HTML (ఈ పేరా పునరావృతం):
అయితే, తాత్కాలికంగా ఇరుకైన తాత్కాలిక నిశ్చితార్థం జరుగుతుంది. మన్మథుడు కాదు, చాలా మంచి పని మరియు మంచి పని.
CSS (ఎడమ చిత్రాలను తేలుతూ):
img.float {float: left; స్పష్టమైన: ఎడమ; మార్జిన్: 5 px;}
మరియు కుడివైపు:
img.float {float: right; స్పష్టమైన: కుడి; మార్జిన్: 5 px;}
లేఅవుట్ కోసం ఫ్లోట్లను ఉపయోగించడం
ఒకసారి మీరు అర్థం ఫ్లోట్ ఆస్తి పనిచేస్తుంది, మీరు మీ వెబ్ పేజీలను వేయడానికి ఉపయోగించడం ప్రారంభించవచ్చు. ఇవి ఒక ఆవిష్కరించబడిన వెబ్ పేజీని సృష్టించడానికి నేను తీసుకోవలసిన దశలు:
- లేఅవుట్ను (కాగితంపై లేదా గ్రాఫిక్స్ సాధనంలో లేదా నా తలపై) డిజైన్ చేయండి.
- పేజీ విభాగాలు ఎక్కడ ఉంటుందో నిర్ణయించండి.
- వివిధ కంటైనర్లు మరియు వాటిని లోపల అంశాలను వెడల్పులను నిర్ణయించండి.
- ప్రతిదీ ఫ్లోట్. అది వెలుపల ఉన్న కంటైనర్ ఎలిమెంట్ కూడా ఎడమకు తేలింది, అందువల్ల అది బ్రౌజర్ వీక్షణ పోర్ట్కు సంబంధించి ఉన్నట్లు నాకు తెలుసు.
మీరు మీ లేఅవుట్ విభాగాల వెడల్పులను (శాతాలు మంచివి) తెలిసినంత వరకు, మీరు ఉపయోగించవచ్చు ఫ్లోట్ ఆస్తి వారు పేజీలో చెందిన వాటిని ఎక్కడ ఉంచాలి. మరియు nice విషయం, మీరు బాక్స్ మాదిరి గురించి చాలా ఆందోళన లేదు ఇంటర్నెట్ ఎక్స్ప్లోరర్ లేదా ఫైర్ఫాక్స్ కోసం భిన్నంగా.
