Мазмұны
Түн ортасы, ал ол да див сіздің сайтыңызда әлі де баланың ойыншық кеудесіне ұқсайды. Барлық элементтер - бұл әуре-сарсаң және сіз CSS-пен ойнаған сайын дисплей мүлік, олар өздерін мүлде басқа мағынасыздыққа айналдырады.
Егер сіз мен сияқты болсаңыз, сіз мұны мылқау арқылы шешіп, пернетақтамен үнемі агрессивті бола аласыз. Бұл стратегия мен үшін бұрын жұмыс істегенімен, мен жақында мұны түсінудің жақсы әдісін іздестірдім дисплей мүлік.
Негіздері шығады дисплей мен ойлағаннан әлдеқайда қарапайым. Шындығында, олар чемоданды орау сияқты принциптерді қолданады. Мен қамтуға бара жатырмын дисплей: блок, кірістірілген блок және кезекте. Егер сіз бұрын чемоданды тәртіппен орналастырған болсаңыз, сіз параллельді көресіз. Егер сіз өзіңіздің барлық киіміңізді кездейсоқ қоштайтын адам болсаңыз - мен сізге жасай алатын көп нәрсе бар.
Біздің чемоданда үш түрлі киім болады:
- Жіңішке, жағалы көйлек тәрізді
- Оралуға болатын футболкалар
- Саңылауларға толтыруға болатын шұлықтар немесе іш киімдер
Анықтама үшін, егер біз чемоданды HTML-де модельдесек, келесідей болар еді:
div class = 'чемодан'> div class = 'нәзік'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'шұлық'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> / div>
Үстіндегі нәзік заттар
Дисплей: блок HTML элементтерінің көпшілігі үшін әдепкі болып табылады. Демек, элемент контейнер ішіндегі бүкіл көлденең кеңістікті алады див. Егер ол басқа бауырлас элементтердің қасында болса, онда ол жаңа жолды бастайды және оның қатарына басқа элементтерге жол бермейді. Бұл сіздің чемоданыңыздың жоғарғы жағына қойған нәзік заттарға ұқсас. Бұл жағалы көйлектер сияқты нәзік немесе ақылды мақалалар. Сіз олардың мыжылғанын қаламайсыз, сондықтан олардың басқа киімдерге итерілмегеніне көз жеткізіңіз.
Бұл ең қиын бөліктердің бірін шығарады дисплей: блок. Жақа көйлек қалайша чемоданның бүкіл енін алып жатқанына назар аударыңыз? Бұл басқа заттар өз деңгейіне көтеріледі дегенді білдірмейді. Айталық, бұл көйлек чемодан енінің 60 пайызын құрайды; ол басқа элементтердің оны жоғарғы деңгейде қосылуына тосқауыл қояды.
Сондықтан суретте сарғыш шекара бар. A дисплей: блок элемент бүкіл көлденең кеңістікті алмаса, айналасына автоматты түрде маржа қосады.
Жинақталған футболкалар
Чемоданыңыздың көп бөлігі сіздің сапарыңызға арналған қалған киімге толы шығар. Қарапайымдылық үшін біз мұны тек жейделермен қысқартқымыз келеді. Бүктеу немесе илемдеу неғұрлым тиімді екендігі туралы интернетте үлкен пікірталас бар. Мен жиналмалы адаммын.
Қалай болғанда да, ең көп заттарға сәйкес келу үшін сіз футболкаларыңызды қатарластырасыз. Дәл осы дисплей: кірістірілген блок арналған. Бұл элементтер бір қатарда бір қатарда, сол қатарда отыра алады дисплей: кірістірілген элементтер.
Айырмашылығы жоқ дисплей: кірістірілген элементтер, кірістірілген блок егер ол құрамына сәйкес келмесе, элемент келесі жолға өтеді див екіншісімен қатар кірістірілген блок элементтер. Футболканы келесі қатарға төгіп тастау үшін оны екіге бөліп, қалған жартысын жаңа жолды бастау үшін пайдалану керек. Кірістірілген блок элементтер сызыққа сыймаса, оларды екіге бөлуге жол берілмейді.
Олқылықтардың орнын толтыратын шұлықтар
HTML-нің түпнұсқасына қайта оралыңыз, сонда бір шұлық бар екенін ескересіз div> сегіз футболка арасында. Бірақ оң жақтағы чемоданның көлденең көрінісіне назар салыңыз. Егер бір шұлық болса div>, ол қалайша орта жолды аяқтап, төменгі жолды бастайды? Бұл мақсат дисплей: кірістірілген!
Ан кезекте элементі енінен асып кетсе, келесі жолға ағып кетеді див (осылайша ол басқаша кірістірілген блок немесе блок). Біздің шұлықтардан бастап див саңылауларға ретсіз салынған шұлықтарға толы, ол ортаңғы қатардың оң жағындағы саңылауды оңай толтыра алады және төменгі қатарды бастау үшін төгіліп кетеді.
Бұл үшін шұлықты екіге бөлудің қажеті жоқ. Сондықтан олар бола алады кезекте, ал футболкалар тек болуы мүмкін кірістірілген блок. Егер ортаңғы қатардағы футболкалар еннің 60 пайызын ғана алса, шұлықтар div> жолдың қалған бөлігіндегі бүкіл кеңістікті толтыру үшін жоғары қарай жылжитын еді.
Жол болсын
Бұл біздің чемодан үшін соңғы CSS:
.delicate {дисплей: блок; ені: 60%; } .tshirt {дисплей: кірістірілген-блок; ені: 20%; } .socks {дисплей: кірістірілген; }
Дисплейдің әр түрлі қолданылуын бейнелейтін бірнеше балама сценарийлер. Егер жоғарғы жағында нәзік тағамдар болса дисплей: кірістірілген блок, олар футболкалармен дәл сәйкес келеді. Кейбір жейделер жоғарғы сызыққа көтеріліп, қалғандары сәйкесінше реттелетін. Жақалы жейденің оң және сол жағында ыңғайлы буфер болмас еді.
Егер әр футболкада болса дисплей-блок, сізде бір-бірінің үстіне бір сызыққа бір-бірінен жаппай футболкалар жинақталған болар еді. Егер шұлық болса дисплей: кірістірілген блок, олардың барлығы екі қатардың арасында жүруден гөрі төменгі қатарға отырады. Кейбір футболкалар басқа қатарға итеріліп, төртінші жолды құрады. Футболкалардың ортаңғы қатарының оң жағында саңылау болады.
Мен осы жерде сипаттаған әдіспен біз қолда бар орынды тиімді пайдаланатын ұқыпты оралған чемоданды аламыз.
Бұл мақала бастапқыда пайда болды тор журналы 289 шығарылым; мұнда сатып алыңыз!
