Садржај
Поноћ је, и то она див на вашој веб локацији и даље изгледа као дечија играчка. Сви елементи су збркани и сваки пут када се играте са ЦСС-овима приказ имовине, преуређују се у сасвим другачију глупост.
Ако сте попут мене, вероватно ћете то решити мрмљајући испод гласа и постајући константно агресивнији са тастатуром. И премда ми је та стратегија раније функционисала, недавно сам кренуо да пронађем бољи начин да то разумем приказ имовина.
Испада основе приказ су много једноставније него што сам првобитно мислио. У ствари, користе исте принципе као и паковање кофера. Покрићу дисплеј блок, инлине-блоцк и у реду. Ако сте раније сређивали кофер, видећете паралелу. Ако сте она врста особе која вам накључно набија сву одећу - па, само толико могу да учиним за вас.
Наш кофер садржи три врсте одеће:
- Деликатна, попут кошуље с крагном
- Мајице које се могу смотати
- Чарапе или доње рубље које се могу трпати у празнине
За референцу, ако бисмо кофер моделирали у ХТМЛ-у, то би изгледало овако:
див цласс = 'кофер'> див цласс = 'њежан'> / див> див цласс = 'тсхирт'> / див> див цласс = 'тсхирт'> / див> див цласс = 'тсхирт'> / див> див цласс = 'мајица'> / див> див цласс = 'соцкс'> / див> див цласс = 'тсхирт'> / див> див цласс = 'тсхирт'> / див> див цласс = 'тсхирт'> / див> див цласс = 'мајица'> / див> / див>
Осетљиви предмети на врху
Дисплеј блок је подразумевано за већину ХТМЛ елемената. То значи да елемент заузима читав хоризонтални простор унутар свог контејнера див. Ако је поред других братских елемената, започиње нову линију и неће дозволити друге елементе на својој линији. Слично је деликатним предметима које ставите на врх кофера. То су деликатни или паметни чланци попут кошуља с крагном. Не желите да се наборају, па се побрините да их не притискају друге делове одеће.
Ово доноси један од најтежих делова дисплеј блок. Приметите како кошуља са крагном не заузима целу ширину кофера? То не значи да ће други предмети скочити на његов ниво. Рецимо да је ова кошуља 60 процената ширине кофера; и даље би блокирао придруживање осталих елемената на највишем нивоу.
Због тога је на слици наранџаста ивица. А. дисплеј блок елемент ће аутоматски додати маргину око себе ако не заузима цео хоризонтални простор.
Уредно спаковане мајице
Већина кофера је вероватно пуна остатка одеће за путовање. Ради једноставности, ово ћемо свести на само мајице. На интернету постоји велика расправа о томе да ли је преклапање или ваљање ефикасније. Ја сам склопива особа.
У сваком случају, да бисте стали у већину предмета, мајице поредате једну поред друге. Управо је то приказ: уграђени блок је намењен за. Ови елементи могу да седе један поред другог на истој линији, као и поред приказ: у линији елементи.
за разлику од приказ: у линији елементи, ан инлине-блоцк елемент ће се преселити у следећи ред ако не одговара садржају див поред другог инлине-блоцк елементи. Да би се мајица прелила на следећи ред, мораћете да је преполовите, а преосталу половину започнете у новом реду. Уграђени блок елементи се не смеју делити на пола ако се не уклапају у линију.
Чарапе које попуњавају празнине
Вратите се изворном ХТМЛ-у и приметићете да постоји једна чарапа див> између осам мајица. Али погледајте хоризонтални приказ кофера са десне стране. Ако постоји једна чарапа див>, како може завршити средњи ред и започети доњи ред? Ово је сврха приказ: у линији!
Ан у реду елемент ће се прелити на следећи ред ако премаши ширину див (на овај начин се разликује од инлине-блоцк или блокирати). Од наших чарапа див је пун чарапа које се случајно трпају у празнине, лако може почети да попуњава празнину на десној страни средњег реда и прелити се да започне доњи ред.
Неће бити потребно преполовити чарапе да би се ово догодило. Због тога могу постати у реду, док мајице могу бити само инлине-блоцк. Ако су мајице у средњем реду заузимале само 60 процената ширине, чарапе див> би се померио горе да попуни читав простор у остатку реда.
Срећан пут
Ово је последњи ЦСС за наш кофер:
.делицате {дисплаи: блоцк; ширина: 60%; } .тсхирт {дисплаи: инлине-блоцк; ширина: 20%; } .соцкс {дисплаи: инлине; }
Ево неколико алтернативних сценарија за илустрацију различитих употреба приказа. Кад би деликатеси на врху имали приказ: уграђени блок, они би се уклопили одмах уз мајице. Неке мајице би се помериле до горње линије, а остале би се прилагодиле томе. Лево и десно од кошуље с крагном не би било удобног тампона.
Да је свака мајица имала дисплеј блок, имали бисте масиван низ мајица једну на другу, једну по линији. Да су чарапе имале приказ: уграђени блок, сви би седели у доњем реду, а не би текли између два реда. Неке мајице би се гурнуле у други ред, формирајући четврту линију. Десно од средњег реда мајица био би празнина.
Помоћу методе коју сам овде изнео на крају имамо уредно спакован кофер који најбоље користи расположиви простор.
Овај чланак се првобитно појавио у нет магазине питање 289; купи га овде!
