Мазмун
- Үстүндөгү назик буюмдар
- Тыкан салынган футболкалар
- Боштуктарды толтурган байпактар
- Жолуңуз шыдыр болсун
Түн ортосу болуп калды, ошол дагы div сиздин сайттагы дагы эле баланын оюнчук сандыгы окшойт. Бардык элементтер баш аламандык, жана CSS менен ойногон сайын дисплей мүлк, алар өздөрүн таптакыр башкача маанисиз нерсеге айлантышат.
Эгер сиз мага окшош болсоңуз, анда муну оозуңуздан күңкүлдөп, клавиатураңыз менен тынымсыз агрессивдүү болуу менен чечишиңиз мүмкүн. Бул стратегия мен үчүн мурун иштеп келген болсо да, жакында аны түшүнүүнүн мыкты жолун издеп баштадым дисплей мүлк.
Бул негиздери болуп саналат дисплей Мен башында ойлогондон кыйла жөнөкөй. Чындыгында, алар чемоданды таңгактоо сыяктуу эле принциптерди колдонушат. Мен камтуу үчүн бара жатам дисплей: блок, inline-block жана Inline. Эгерде сиз буга чейин чемоданды иреттүүлүк менен тизип койсоңуз, анда сиз параллелди көрө аласыз. Эгер сиз бардык кийимдериңизди башаламан тартипте кочкорлукка салган адам болсоңуз, анда мен сиз үчүн көп нерсе жасай алам.
Биздин чемоданда үч түрдөгү кийим болот:
- Жакшынакай көйнөк сыяктуу назик буюмдар
- Ороолуп турган футболкалар
- Боштуктарга толтура турган байпак же ич кийим
Маалымат үчүн, эгер биз чемоданды HTML форматында моделдесек, анда мындай болмок:
div class = 'chamomad'> div class = 'nozik'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'corab'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> / div>
Үстүндөгү назик буюмдар
Көрсөтүү: блок көпчүлүк HTML элементтери үчүн демейки болуп саналат. Демек, элемент идиштин ичиндеги горизонталдуу мейкиндикти ээлейт div. Эгерде ал башка бир тууган элементтердин жанында болсо, анда ал жаңы сапты баштайт жана анын сапында башка элементтерге жол бербейт. Чемоданыңыздын үстүнө койгон назик буюмдарыңызга окшош. Бул жакалуу көйнөк сыяктуу назик же акылдуу макалалар. Сиз алардын бырышып кетишин каалабайсыз, ошондуктан алардын башка кийимдерге түртүлбөгөнүн текшерип коюңуз.
Бул эң оор бөлүктөрүнүн бирин алып келет дисплей: блок. Жака көйнөк чемодандын бүт туурасын ээлей албаганына көңүл бурсаңыз? Башка нерселер анын деңгээлине көтөрүлөт дегенди билдирбейт. Бул көйнөк чемодандын туурасынын 60 пайызын түзөт дейли; ал дагы башка элементтердин ага жогорку деңгээлде кошулушуна бөгөт коёт.
Ошондуктан сүрөттө кызгылт сары чек ара бар. A дисплей: блок бүт горизонталдуу мейкиндикти ээлебесе, элемент автоматтык түрдө айланасына маржа кошот.
Тыкан салынган футболкалар
Чемоданыңыздын көпчүлүгү саякаттоо үчүн калган кийимдериңизге толуп кетсе керек. Жөнөкөйлүк үчүн биз муну жөн эле футболкаларга чейин кыскартмакчыбыз. Бүктөө же тоголотуу натыйжалуубу деген интернетте чоң талаш-тартыштар жүрүп жатат. Мен бүктөмдүү адаммын.
Кандай болсо дагы, көпчүлүк буюмдарга туура келүү үчүн, сиз футболкаларды катарлаш тизип жатасыз. Дал ушул нерсе дисплей: inline-block арналган. Бул элементтер бир эле сапта бири-биринин жанына, ошондой эле жанында отура алышат дисплей: Inline элементтер.
Айырмаланып дисплей: Inline элементтер, ан inline-block элемент кийинки сапка өтөт, эгерде анын курамына туура келбесе div экинчиси менен катар inline-block элементтер. Кийинки катарга футболка төгүлүп кетиши үчүн, аны экиге бөлүп, калган жарымын колдонуп, жаңы катар баштоо керек. Inline-block сызыкка туура келбесе, элементтердин экиге бөлүнүшүнө жол берилбейт.
Боштуктарды толтурган байпактар
Баштапкы HTMLге кайрылып, бир байпак бар экендигин байкайсыз div> сегиз футболканын ортосунда. Бирок оң жактагы чемодандын горизонталдык көрүнүшүн карап көрүңүз. Эгерде бир байпак болсо div>, ал кандайча ортоңку сапты аяктап, төмөнкү сапты башташы мүмкүн? Бул максаты дисплей: Inline!
An Inline элементинин туурасынан ашып кетсе, кийинки сапка төгүлөт div (ушул жол менен ал айырмаланат inline-block же блок). Биздин байпак болгондуктан div боштуктарга толтурулган байпактарга толгон, ортоңку катардын оң жагындагы боштукту оңой эле толтуруп, төмөнкү сапты баштоо үчүн төгүлүп кетиши мүмкүн.
Бул үчүн эч кандай байпакты экиге бөлүүнүн кажети жок. Ошондуктан алар боло алышат Inline, ал эми футболкалар гана болушу мүмкүн inline-block. Эгерде ортоңку катардагы футболкалар туурасынын 60 пайызын гана алса, байпактар div> калган катардагы боштукту толтуруу үчүн жогору көтөрүлмөк.
Жолуңуз шыдыр болсун
Бул биздин чемодан үчүн акыркы CSS:
.delicate {дисплей: блок; туурасы: 60%; } .tshirt {дисплей: inline-block; туурасы: 20%; } .socks {display: inline; }
Дисплейдин ар кандай колдонулушун чагылдырган бир-эки кошумча сценарийлер келтирилген. Эгерде үстүндөгү деликатестер болсо дисплей: inline-block, алар футболкалардын жанына туура келишкен. Футболкалардын айрымдары жогорку сапка көтөрүлүп, калгандары ошого жараша жөндөшөт. Жакалуу көйнөктүн сол жана оң жагында ыңгайлуу буфер болбойт эле.
Эгерде ар бир футболка болсо дисплей-блок, сизде ар бир сапта бири-биринин үстүнө топтолгон футболкалар топтому болмок. Эгер байпак болсо дисплей: inline-block, алардын бардыгы эки катардын ортосунда агып отурбастан, төмөнкү катарда отурушмак. Айрым футболкалар башка катарга түртүлүп, төртүнчү сапты түзмөк. Футболкалардын ортоңку катарынын оң жагында боштук болмок.
Бул жерде мен белгилеп өткөн ыкма менен, биз бош орундарды туура пайдаланган, тыкан салынган чемоданды алып келебиз.
Бул макала башында пайда болгон net journal 289 чыгарылыш; бул жерден сатып алыңыз!
