విషయము
ఇది అర్ధరాత్రి, మరియు అది div మీ సైట్‌లో ఇప్పటికీ పిల్లల బొమ్మ ఛాతీలా కనిపిస్తుంది. అన్ని అంశాలు గందరగోళంగా ఉన్నాయి మరియు మీరు CSS తో ఆడిన ప్రతిసారీ ప్రదర్శన ఆస్తి, వారు తమను తాము పూర్తిగా భిన్నమైన అర్ధంలేనిదిగా మార్చారు.
మీరు నన్ను ఇష్టపడితే, మీరు మీ శ్వాస కింద గొణుగుతూ మరియు మీ కీబోర్డ్‌తో మరింత దూకుడుగా మారడం ద్వారా దీన్ని పరిష్కరించవచ్చు. ఇంతకుముందు ఆ వ్యూహం నా కోసం పనిచేసినప్పటికీ, అర్థం చేసుకోవడానికి మంచి మార్గాన్ని కనుగొనటానికి నేను ఇటీవల బయలుదేరాను ప్రదర్శన ఆస్తి.
ఇది ప్రాథమికాలను మారుస్తుంది ప్రదర్శన నేను మొదట అనుకున్నదానికంటే చాలా సరళమైనవి. వాస్తవానికి, వారు సూట్‌కేస్‌ను ప్యాక్ చేసే సూత్రాలను ఉపయోగిస్తారు. నేను కవర్ చేయబోతున్నాను ప్రదర్శన: బ్లాక్, ఇన్లైన్-బ్లాక్ మరియు లైన్ లో. మీరు ఇంతకు ముందు సూట్‌కేస్‌ను క్రమబద్ధంగా ఏర్పాటు చేస్తే, మీరు సమాంతరంగా చూస్తారు. మీరు మీ దుస్తులన్నింటినీ అప్రమత్తమైన రీతిలో నడిపించే వ్యక్తి అయితే - నేను మీ కోసం చేయగలిగేది చాలా ఉంది.
మా సూట్‌కేస్‌లో మూడు రకాల దుస్తులు ఉంటాయి:
- కాలర్డ్ చొక్కా లాగా సున్నితమైనది
- చుట్టుముట్టగల టీ-షర్టులు
- సాక్స్ లేదా లోదుస్తులు ఖాళీలలో నింపవచ్చు
సూచన కోసం, మేము సూట్‌కేస్‌ను HTML లో మోడల్ చేస్తే, ఇది ఇలా ఉంటుంది:
div class = 'suitcase'> div class = 'సున్నితమైన'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'socks'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> / div>
పైన సున్నితమైన అంశాలు
ప్రదర్శన: బ్లాక్ చాలా HTML మూలకాలకు అప్రమేయం. అంటే మూలకం దాని కంటైనర్‌లోని మొత్తం క్షితిజ సమాంతర స్థలాన్ని ఆక్రమిస్తుంది div. ఇది ఇతర తోబుట్టువుల మూలకాల పక్కన ఉంటే, అది క్రొత్త పంక్తిని ప్రారంభిస్తుంది మరియు దాని పంక్తిలో ఇతర అంశాలను అనుమతించదు. ఇది మీ సూట్కేస్ పైభాగంలో మీరు ఉంచిన సున్నితమైన వస్తువులతో సమానంగా ఉంటుంది. ఇవి కాలర్డ్ షర్ట్స్ వంటి సున్నితమైన లేదా స్మార్ట్ కథనాలు. అవి ముడతలు పడటం మీకు ఇష్టం లేదు, కాబట్టి అవి ఇతర దుస్తులకు వ్యతిరేకంగా లేవని మీరు నిర్ధారించుకోండి.
ఇది కష్టతరమైన భాగాలలో ఒకటి తెస్తుంది ప్రదర్శన: బ్లాక్. సూట్కేస్ యొక్క మొత్తం వెడల్పును కాలర్డ్ చొక్కా ఎలా ఆక్రమించలేదని గమనించండి? ఇతర అంశాలు దాని స్థాయికి చేరుకుంటాయని కాదు. ఈ చొక్కా సూట్కేస్ వెడల్పులో 60 శాతం అని చెప్పండి; ఇది ఇప్పటికీ ఇతర అంశాలను ఉన్నత స్థాయిలో చేరకుండా నిరోధిస్తుంది.
అందుకే చిత్రంలో నారింజ అంచు ఉంది. జ ప్రదర్శన: బ్లాక్ మొత్తం క్షితిజ సమాంతర స్థలాన్ని ఆక్రమించకపోతే మూలకం స్వయంచాలకంగా దాని చుట్టూ మార్జిన్‌ను జోడిస్తుంది.
చక్కగా ప్యాక్ చేసిన టీ షర్టులు
మీ ట్రిప్ కోసం మీ సూట్‌కేస్‌లో ఎక్కువ భాగం మీ మిగిలిన దుస్తులతో నిండి ఉండవచ్చు. సరళత కొరకు, మేము దీనిని కేవలం టీ-షర్టులకు తగ్గించబోతున్నాము. మడత లేదా రోలింగ్ మరింత సమర్థవంతంగా ఉందా అనే విషయంపై ఇంటర్నెట్‌లో పెద్ద చర్చ జరుగుతోంది. నేను మడతపెట్టే వ్యక్తిని.
ఏదేమైనా, చాలా వస్తువులకు సరిపోయేలా, మీరు మీ టీ-షర్టులను పక్కపక్కనే ఉంచుతారు. ఇది ఖచ్చితంగా ఏమిటి ప్రదర్శన: ఇన్లైన్-బ్లాక్ కోసం ఉద్దేశించబడింది. ఈ అంశాలు ఒకే వరుసలో ఒకదానికొకటి పక్కన కూర్చోవచ్చు, అలాగే పక్కన ఉంటాయి ప్రదర్శన: ఇన్లైన్ అంశాలు.
కాకుండా ప్రదర్శన: ఇన్లైన్ మూలకాలు, ఒక ఇన్లైన్-బ్లాక్ మూలకం దానిలోనికి సరిపోకపోతే తదుపరి పంక్తికి వెళుతుంది div మరొకటి పక్కన ఇన్లైన్-బ్లాక్ అంశాలు. తరువాతి వరుసలో టీ-షర్టు చిందటం కోసం, మీరు దానిని సగానికి తగ్గించి, మిగిలిన సగం కొత్త వరుసను ప్రారంభించడానికి ఉపయోగించాలి. ఇన్లైన్-బ్లాక్ మూలకాలు ఒక పంక్తికి సరిపోకపోతే సగానికి విభజించటానికి అనుమతించబడవు.
ఖాళీలను పూరించే సాక్స్
అసలు HTML కి తిరిగి తనిఖీ చేయండి మరియు ఒక సాక్స్ ఉందని మీరు గమనించవచ్చు div> ఎనిమిది టీ-షర్టుల మధ్య. కానీ కుడి వైపున ఉన్న సూట్కేస్ యొక్క క్షితిజ సమాంతర వీక్షణను చూడండి. ఒక సాక్స్ ఉంటే div>, ఇది మధ్య వరుసను ఎలా ముగించి దిగువ వరుసను ప్రారంభించగలదు? దీని ఉద్దేశ్యం ప్రదర్శన: ఇన్లైన్!
ఒక లైన్ లో మూలకం యొక్క వెడల్పును మించి ఉంటే తదుపరి పంక్తికి చిందుతుంది div (ఈ విధంగా ఇది భిన్నంగా ఉంటుంది ఇన్లైన్-బ్లాక్ లేదా బ్లాక్). మా సాక్స్ నుండి div ఖాళీగా నిండిన సాక్స్లతో నిండి ఉంది, ఇది మధ్య వరుస యొక్క కుడి వైపున ఉన్న ఖాళీని సులభంగా నింపడం ప్రారంభిస్తుంది మరియు దిగువ వరుసను ప్రారంభించడానికి చిందుతుంది.
ఇది జరగడానికి సాక్స్లను సగానికి తగ్గించాల్సిన అవసరం లేదు. అందుకే అవి మారవచ్చు లైన్ లో, టీ-షర్టులు మాత్రమే కావచ్చు ఇన్లైన్-బ్లాక్. మధ్య వరుసలో ఉన్న టీ-షర్టులు వెడల్పు 60 శాతం మాత్రమే తీసుకుంటే, సాక్స్ div> మిగిలిన అడ్డు వరుసలో మొత్తం స్థలాన్ని పూరించడానికి పైకి కదులుతుంది.
బాన్ సముద్రయానం
ఇది మా సూట్‌కేస్‌కు చివరి CSS:
.డిలికేట్ {ప్రదర్శన: బ్లాక్; వెడల్పు: 60%; } .షర్ట్ {ప్రదర్శన: ఇన్లైన్-బ్లాక్; వెడల్పు: 20%; } .సాక్స్ {ప్రదర్శన: ఇన్లైన్; }
ప్రదర్శన యొక్క విభిన్న ఉపయోగాలను వివరించడానికి ఇక్కడ ఒక జంట ప్రత్యామ్నాయ దృశ్యాలు ఉన్నాయి. పైన ఉన్న సున్నితమైనవి ఉంటే ప్రదర్శన: ఇన్లైన్-బ్లాక్, అవి టీ-షర్టులతో పాటు సరిగ్గా సరిపోతాయి. కొన్ని టీ-షర్టులు టాప్ లైన్ వరకు కదులుతాయి, మరియు మిగిలినవి తదనుగుణంగా సర్దుబాటు చేస్తాయి. కాలర్డ్ చొక్కా యొక్క ఎడమ మరియు కుడి వైపున సౌకర్యవంతమైన బఫర్ ఉండదు.
ప్రతి టీ షర్టు ఉంటే డిస్ప్లే-బ్లాక్, మీరు ఒకదానికొకటి పైన టీ-షర్టుల భారీ స్టాక్ కలిగి ఉంటారు, ప్రతి పంక్తికి ఒకటి. సాక్స్ ఉంటే ప్రదర్శన: ఇన్లైన్-బ్లాక్, అవన్నీ రెండు వరుసల మధ్య ప్రవహించకుండా దిగువ వరుసలో కూర్చుంటాయి. కొన్ని టీ-షర్టులు మరొక వరుసలోకి నెట్టబడతాయి, ఇది నాల్గవ పంక్తిని ఏర్పరుస్తుంది. టీ-షర్టుల మధ్య వరుస కుడి వైపున ఖాళీ ఉంటుంది.
నేను ఇక్కడ వివరించిన పద్ధతిలో, చక్కగా ప్యాక్ చేసిన సూట్‌కేస్‌తో ముగుస్తుంది, అది అందుబాటులో ఉన్న స్థలాన్ని బాగా ఉపయోగించుకుంటుంది.
ఈ వ్యాసం మొదట కనిపించింది నెట్ మ్యాగజైన్ సంచిక 289; ఇక్కడ కొనండి!
