- Sa pamamagitan ng paggamit ng ' grid ”
- Sa pamamagitan ng paggamit ng ' baluktot ”
- Sa pamamagitan ng paggamit ng ' lumutang ”
Sa artikulong ito, tatalakayin natin ang bawat isa sa mga nabanggit na diskarte nang isa-isa at magbibigay ng angkop na halimbawa ng bawat pamamaraan.
Kaya, magsimula tayo!
Paraan 1: Maglagay ng Dalawang Divs Magkatabi sa CSS Gamit ang grid
Ang CSS ' grid Ang layout ay nagbibigay-daan sa gumagamit na maglagay ng dalawa o higit pang dalawang div na magkatabi. Karaniwan, ang grid ay isang halaga ng display property na ginamit upang lumikha ng layout na binubuo ng mga row at column.
Syntax
Ang syntax ng display property na may grid layout ay ibinigay sa ibaba:
display: grid
Ngayon, tingnan natin ang isang halimbawa na nauugnay sa paglalagay ng dalawang div na magkatabi sa CSS gamit ang layout ng grid.
Halimbawa
Dito, gagawa kami ng dalawang child div sa loob ng parent div, na may mga pangalan ng klase bilang ' magulang ”, “ anak 'at' anak ”:
< div klase = 'magulang' >< div klase = 'bata' >< / div >
< div klase = 'bata' >< / div >
< / div >
Susunod sa seksyong CSS, gamitin ang “ .magulang ' para ma-access ang parent div at itakda ang value ng display property bilang ' grid ”. Susunod, itakda ang fraction gamit ang “ grid-template-column ” property upang lumikha ng espasyo para sa mga column. Sa aming kaso, magtatakda kami ng mga fraction bilang ' 1fr 'at' 1fr ”, na nangangahulugang ang parehong div ay nakakuha ng pantay na espasyo. Higit pa rito, itatakda namin ang gap sa pagitan ng dalawang column gamit ang column-gap property at itatakda ang value nito bilang “ 25px ”.
CSS:
.magulang {display : grid ;
grid-template-column : 1fr 1fr ;
column-gap : 25px ;
}
Sa susunod na hakbang, ginagamit namin ang ' .bata ' para ma-access ang parehong child div at itakda ang taas ng mga div bilang ' 250px ” at itakda ang kulay ng background bilang “ rgb(253, 5, 109) ”:
.bata {taas : 250px ;
background : rgb ( 253 , 5 , 109 ) ;
}
Ipapakita nito ang sumusunod na kinalabasan:
Lumipat tayo sa ibang paraan upang magkatabi ang div
Paraan 2: Maglagay ng Dalawang Div Magkatabi sa CSS Gamit ang flex
Ang ' baluktot ” ay ang halaga ng display property na nagbibigay-daan sa paglalagay ng dalawang div na magkatabi. Ginagamit ang property na ito para magtakda ng flexible na haba para sa flexible na item. Pinaliit o pinalalaki nito ang flex item upang magkasya sa lalagyan nito.
Syntax
Ang syntax ng display property na may flex ay ibinibigay sa ibaba:
display: flex;Lumipat tayo sa halimbawa upang maunawaan ang nakasaad na konsepto.
Halimbawa
Isasaalang-alang namin ang parehong HTML file at ilapat ang ' baluktot ” sa lalagyan ng magulang. Dito, itatakda namin ang halaga ng display property bilang flex at itatakda ang gap sa pagitan ng mga child div bilang ' 10px ”:
.magulang {display : baluktot ;
gap : 10px ;
}
Pagkatapos nito, itakda ang lapad, taas at kulay ng background ng div bilang ' 650px ”, “ 200px ”, at “rgb(0, 255, 42) ”, ayon sa pagkakabanggit:
.bata {lapad : 650px ;
taas : 200px ;
background : rgb ( 0 , 255 , 42 ) ;
}
Ang kinalabasan ng ibinigay na code ay ibinigay sa ibaba:
Paraan 3: Maglagay ng Dalawang Divs Magkatabi sa CSS Gamit ang float
Ang CSS float property ay tumutukoy sa lumulutang na direksyon ng isang elemento. Higit na partikular, maaaring gamitin ang property na ito para sa paglalagay ng dalawang div na magkatabi sa CSS.
Syntax
Ang syntax ng float property ay:
float: wala|kaliwa|kananNarito ang paglalarawan para sa mga halagang ibinigay sa itaas:
- wala: Ito ay ginagamit upang paghigpitan ang lumulutang.
- kaliwa: Ito ay ginagamit upang lumutang ng mga elemento sa kaliwang bahagi.
- tama: Ito ay ginagamit upang lumutang ng mga elemento sa kanang bahagi.
Lumipat tayo sa halimbawa ng paglalagay ng div nang magkatabi.
Halimbawa
Ngayon, gagawa tayo ng dalawang div sa loob ng
tag at magtalaga ng pangalan ng klase bilang “ div1 'at' div2 ”: < katawan >< div klase = 'div1' >< / div >
< div klase = 'div2' >< / div >
< / katawan >
Pagkatapos, gamitin ang ' .div1 'at' .div2 ” para ma-access ang mga container na idinagdag sa seksyong HTML. Gagamitin namin ang parehong mga div sa parehong klase dahil ang mga katangian at mga halaga na itatalaga namin sa pareho ay pareho.
Susunod, itinalaga namin ang halaga ng float property bilang ' umalis ' at itakda ang lapad at taas ng div bilang ' limampung% 'at' 40% ”. Ginagamit din namin ang box-sizing property at itinakda ang halaga nito bilang ' hangganan-kahon ”. Higit pa rito, itakda ang kulay ng background ng div bilang “ rgb(7, 255, 222) ” at itakda ang mga halaga ng border property bilang “ 3px ”, “ solid ”, at “ rgb(255, 0, 255) ”:
.div1 , .div2 {lumutang : umalis ;
lapad : limampung% ;
taas : 40% ;
laki ng kahon : hangganan-kahon ;
background : rgb ( 7 , 255 , 222 ) ;
hangganan : 3px solid rgb ( 255 , 0 , 255 ) ;
}
Tandaan: Maaari kang maglagay ng dalawang div na magkatabi nang hindi gumagamit ng box-sizing property at border property sa pamamagitan ng pagtatakda ng iba't ibang kulay ng background ng mga div.
Sa sandaling ipatupad mo ang code sa itaas, isasagawa ang HTML file at tingnan ang resulta:
Tandaan: Upang lumikha ng isang puwang sa pagitan ng dalawang div, lumikha muna ng isa pang div at pagkatapos ay itakda ang margin ng div nang naaayon.
Konklusyon
Ang mga div ay maaaring ilagay sa tabi sa pamamagitan ng paggamit ng tatlong magkakaibang pamamaraan ng CSS, na kung saan ay ang ' baluktot 'at' grid ' mga halaga ng display property at ang ' lumutang ” ari-arian. Ang bawat isa sa mga pamamaraan ay gumagana nang mahusay; gayunpaman, maaari mong gamitin ang alinman sa mga ito ayon sa aming mga kinakailangan. Sa gabay na ito, tinalakay namin ang tatlong paraan upang ilagay ang div nang magkatabi Gamit ang CSS at nagbigay ng mga kaugnay na halimbawa.