Nilalaman
- Ang mga pinong item sa itaas
- Malinis na naka-pack na T-shirt
- Ang mga medyas na pumupuno sa mga puwang
- Maligayang paglalakbay
Hatinggabi na, at ang isa div sa iyong site ay mukhang laruang dibdib ng bata. Ang lahat ng mga elemento ay isang gusot, at sa tuwing naglalaro ka sa CSS ipakita pag-aari, muling ayusin nila ang kanilang sarili sa isang ganap na magkakaibang kaunting kalokohan.
Kung katulad mo ako, marahil malulutas mo ito sa pamamagitan ng pag-ungol sa ilalim ng iyong hininga at maging palaging mas agresibo sa iyong keyboard. At bagaman ang diskarteng iyon ay gumana para sa akin dati, kamakailan lamang ay nagtakda ako upang makahanap ng isang mas mahusay na paraan upang maunawaan ang ipakita pag-aari
Ito ay lumalabas na mga pangunahing kaalaman ng ipakita ay mas simple kaysa sa orihinal na naisip ko. Sa katunayan, gumagamit sila ng parehong mga prinsipyo sa pag-iimpake ng isang maleta. Magtatakip ako ipakita: harangan, inline-block at nasa linya. Kung nag-ayos ka ng maleta sa isang maayos na paraan dati, makikita mo ang kahanay. Kung ikaw ang uri ng tao na ramdam ang lahat ng iyong damit sa isang mahirap na pamamaraan - mabuti, mayroon lamang magkano ang magagawa ko para sa iyo.
Maglalaman ang aming maleta ng tatlong uri ng damit:
- Mga delikado, tulad ng isang collared shirt
- Mga T-shirt na maaaring mapagsama
- Mga medyas o damit na panloob na maaaring mapunan sa mga puwang
Para sa sanggunian, kung na-modelo namin ang maleta sa HTML, ganito ang hitsura:
div class = 'maleta'> div class = 'delicate'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'medyas'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> / div>
Ang mga pinong item sa itaas
Ipakita: block ay ang default para sa karamihan ng mga elemento ng HTML. Nangangahulugan iyon na sinasakop ng elemento ang buong pahalang na puwang sa loob ng lalagyan nito div. Kung ito ay katabi ng iba pang mga elemento ng kapatid, magsisimula ito ng isang bagong linya, at hindi papayagan ang iba pang mga elemento sa linya nito. Ito ay katulad ng mga pinong item na inilagay mo sa tuktok ng iyong maleta. Ito ang mga maselan o matalinong artikulo tulad ng mga collared shirt. Hindi mo nais na sila ay maging kulubot, kaya tinitiyak mo na hindi sila maitulak laban sa iba pang mga piraso ng damit.
Dinadala nito ang isa sa pinakamahirap na bahagi ng ipakita: harangan. Pansinin kung paano hindi sinakop ng collared shirt ang buong lapad ng maleta? Hindi nangangahulugang ang iba pang mga item ay tatalon sa antas nito. Sabihin nating ang shirt na ito ay 60 porsyento ng lapad ng maleta; hahadlangan pa rin nito ang iba pang mga elemento mula sa pagsali dito sa pinakamataas na antas.
Iyon ang dahilan kung bakit mayroong isang orange na hangganan sa larawan. A ipakita: harangan elemento ay awtomatikong magdagdag ng isang margin sa paligid nito kung hindi ito sakupin ang buong pahalang na puwang.
Malinis na naka-pack na T-shirt
Karamihan sa iyong maleta ay malamang na puno ng natitirang mga damit mo para sa iyong paglalakbay. Alang-alang sa pagiging simple, ibabawas namin ito sa mga T-shirt lamang. Mayroong isang malaking debate sa internet kung ang pagtitiklop o pagulong ay mas mahusay. Ako ay isang natitiklop na uri ng tao.
Gayunpaman, upang magkasya ang pinakamaraming mga item, pinagsama mo ang iyong mga T-shirt na magkatabi. Ito mismo ang ano ipakita: inline-block ay para sa. Ang mga elementong ito ay maaaring umupo sa tabi ng bawat isa sa parehong linya, pati na rin sa tabi display: inline mga elemento.
Hindi katulad display: inline elemento, an inline-block ang elemento ay lilipat sa susunod na linya kung hindi ito umaangkop sa nilalaman nito div sa tabi ng isa pa inline-block mga elemento. Upang magkaroon ng isang T-shirt spill sa susunod na hilera, kakailanganin mong i-cut ito sa kalahati at gamitin ang natitirang kalahati upang magsimula ng isang bagong hilera. Inline-block Hindi pinapayagan ang mga elemento na hatiin sa kalahati kung hindi sila magkasya sa isang linya.
Ang mga medyas na pumupuno sa mga puwang
Bumalik sa orihinal na HTML at mapapansin mo na mayroong isang medyas div> sa pagitan ng walong T-shirt. Ngunit tingnan ang pahalang na pagtingin ng maleta sa kanan. Kung mayroong isang medyas div>, paano nito matatapos ang gitnang hilera at simulan ang ilalim na hilera? Ito ang layunin ng ipakita: inline!
Isang nasa linya ang elemento ay bubuhos sa susunod na linya kung lumampas ito sa lapad ng div (sa ganitong paraan iba ito sa inline-block o harangan). Dahil ang aming medyas div ay puno ng mga medyas na hindi sinasadya na pinalamanan sa mga puwang, madali itong masisimulang punan ang puwang sa kanang bahagi ng gitnang hilera at ibuhos upang simulan ang ilalim na hilera.
Walang medyas na kakailanganing gupitin para maganap ito. Ito ang dahilan kung bakit sila maaaring maging nasa linya, habang ang mga T-shirt ay maaari lamang inline-block. Kung ang mga T-shirt na nasa gitnang hilera ay tumagal lamang ng 60 porsyento ng lapad, ang mga medyas div> ay lilipat upang punan ang buong puwang sa natitirang hilera.
Maligayang paglalakbay
Ito ang pangwakas na CSS para sa aming maleta:
.delicate {display: block; lapad: 60%; } .tshirt {display: inline-block; lapad: 20%; } .socks {display: inline; }
Narito ang isang pares na kahaliling mga pangyayari upang ilarawan ang iba't ibang paggamit ng display. Kung ang mga delikado sa itaas ay nagkaroon ipakita: inline-block, magkakasya sila sa tabi mismo ng mga T-shirt. Ang ilan sa mga T-shirt ay lilipat sa tuktok na linya, at ang natitira ay aakma alinsunod dito. Walang magiging komportableng buffer sa kaliwa at kanan ng collared shirt.
Kung mayroon ang bawat T-shirt display-block, magkakaroon ka ng isang napakalaking stack ng mga T-shirt sa tuktok ng bawat isa, isa bawat linya. Kung mayroon ang medyas ipakita: inline-block, lahat sila ay uupo sa ibabang hilera sa halip na dumaloy sa pagitan ng dalawang hilera. Ang ilang mga T-shirt ay itulak sa isa pang hilera, na bumubuo ng isang ika-apat na linya. Magkakaroon ng isang puwang sa kanan ng gitnang hilera ng mga T-shirt.
Sa pamamaraang nailahad ko rito, nagtatapos kami sa isang maayos na naka-pack na maleta na pinakamahusay na magagamit ang magagamit na puwang.
Ang artikulong ito ay orihinal na lumitaw sa magazine sa net isyu 289; bilhin mo dito!
