- Dengan menggunakan ' kisi-kisi ”
- Dengan menggunakan ' melenturkan ”
- Dengan menggunakan ' mengambang ”
Dalam artikel ini, kita akan membahas masing-masing pendekatan yang disebutkan satu per satu dan memberikan contoh yang sesuai untuk setiap metode.
Jadi, mari kita mulai!
Metode 1: Tempatkan Dua Div Berdampingan di CSS Menggunakan kisi
CSSnya “ kisi-kisi ” layout memungkinkan pengguna untuk menempatkan dua atau lebih dua div secara berdampingan. Pada dasarnya, grid adalah nilai properti tampilan yang digunakan untuk membuat layout yang terdiri dari baris dan kolom.
Sintaksis
Sintaks properti tampilan dengan tata letak kisi diberikan di bawah ini:
tampilan: kisi
Sekarang, mari kita lihat contoh yang terkait dengan menempatkan dua div berdampingan di CSS menggunakan tata letak grid.
Contoh
Di sini, kita akan membuat dua div anak di dalam div induk, dengan nama kelas sebagai “ induk ”, “ anak ' dan ' anak ”:
< div kelas = 'induk' >< div kelas = 'anak' >< / div >
< div kelas = 'anak' >< / div >
< / div >
Selanjutnya di bagian CSS, gunakan “ .induk ” untuk mengakses div induk dan menetapkan nilai properti tampilan sebagai “ kisi-kisi ”. Selanjutnya, atur pecahan dengan menggunakan “ kisi-templat-kolom ” properti untuk membuat ruang untuk kolom. Dalam kasus kami, kami akan menetapkan pecahan sebagai “ 1fr ' dan ' 1fr ”, yang berarti kedua div telah memperoleh ruang yang sama. Selanjutnya, kita akan mengatur jarak antara dua kolom menggunakan properti kolom-celah dan menetapkan nilainya sebagai “ 25px ”.
CSS:
.induk {menampilkan : kisi-kisi ;
kisi-templat-kolom : 1fr 1fr ;
celah kolom : 25px ;
}
Pada langkah selanjutnya, kita menggunakan “ .anak ” untuk mengakses kedua div anak dan mengatur ketinggian div sebagai “ 250px ” dan atur warna latar belakang sebagai “ rgb(253, 5, 109) ”:
.anak {tinggi : 250px ;
Latar Belakang : rgb ( 253 , 5 , 109 ) ;
}
Ini akan menunjukkan hasil berikut:
Mari beralih ke metode lain untuk menempatkan div berdampingan
Metode 2: Tempatkan Dua Div Berdampingan di CSS Menggunakan flex
' melenturkan ” adalah nilai properti tampilan yang memungkinkan penempatan dua div secara berdampingan. Properti ini digunakan untuk mengatur panjang fleksibel untuk item fleksibel. Ini menyusut atau menumbuhkan item fleksibel agar sesuai dengan wadahnya.
Sintaksis
Sintaks properti tampilan dengan flex diberikan di bawah ini:
tampilan: fleksibel;Mari kita beralih ke contoh untuk memahami konsep yang dinyatakan.
Contoh
Kami akan mempertimbangkan file HTML yang sama dan menerapkan “ melenturkan ” ke wadah induk. Di sini, kita akan mengatur nilai properti tampilan sebagai flex dan mengatur jarak antara div anak sebagai “ 10px ”:
.induk {menampilkan : melenturkan ;
celah : 10px ;
}
Setelah itu, atur lebar, tinggi, dan warna latar belakang div sebagai “ 650px ”, “ 200px ', dan “rgb(0, 255, 42) ”, masing-masing:
.anak {lebar : 650px ;
tinggi : 200px ;
Latar Belakang : rgb ( 0 , 255 , 42 ) ;
}
Hasil dari kode yang diberikan diberikan di bawah ini:
Metode 3: Tempatkan Dua Div Berdampingan di CSS Menggunakan float
Properti float CSS menentukan arah mengambang suatu elemen. Lebih khusus lagi, properti ini dapat digunakan untuk menempatkan dua div berdampingan di CSS.
Sintaksis
Sintaks dari properti float adalah:
float: tidak ada|kiri|kananBerikut adalah deskripsi untuk nilai yang diberikan di atas:
- tidak ada: Ini digunakan untuk membatasi mengambang.
- kiri: Hal ini digunakan untuk mengapung elemen di sisi kiri.
- Baik: Ini digunakan untuk mengapungkan elemen di sisi kanan.
Mari kita beralih ke contoh menempatkan div berdampingan.
Contoh
Sekarang, kita akan membuat dua div di dalam tag
dan menetapkan nama kelas sebagai “ div1 ' dan ' div2 ”: < tubuh >< div kelas = 'div1' >< / div >
< div kelas = 'div2' >< / div >
< / tubuh >
Kemudian, gunakan “ .div1 ' dan ' .div2 ” untuk mengakses wadah yang ditambahkan di bagian HTML. Kami akan menggunakan kedua div di kelas yang sama karena properti dan nilai yang akan kami tetapkan untuk keduanya sama.
Selanjutnya, kami menetapkan nilai properti float sebagai “ kiri ” dan atur lebar dan tinggi div sebagai “ lima puluh% ' dan ' 40% ”. Kami juga menggunakan properti box-sizing dan menetapkan nilainya sebagai “ kotak perbatasan ”. Selanjutnya, atur warna latar belakang div sebagai “ rgb(7, 255, 222) ” dan atur nilai properti border sebagai “ 3px ”, “ padat ', dan ' rgb(255, 0, 255) ”:
.div1 , .div2 {mengambang : kiri ;
lebar : lima puluh% ;
tinggi : 40% ;
ukuran kotak : perbatasan-kotak ;
Latar Belakang : rgb ( 7 , 255 , 222 ) ;
berbatasan : 3px padat rgb ( 255 , 0 , 255 ) ;
}
Catatan: Anda dapat menempatkan dua div secara berdampingan tanpa menggunakan properti box-sizing dan properti border dengan mengatur warna latar belakang div yang berbeda.
Setelah Anda menerapkan kode di atas, jalankan file HTML dan lihat hasilnya:
Catatan: Untuk membuat celah antara dua div, pertama buat div lain dan kemudian atur margin div yang sesuai.
Kesimpulan
Div dapat ditempatkan berdampingan dengan menggunakan tiga metode CSS yang berbeda, yaitu ' melenturkan ' dan ' kisi-kisi ” nilai properti tampilan dan “ mengambang ' Properti. Masing-masing metode bekerja secara efisien; namun, Anda dapat menggunakan salah satu dari mereka sesuai dengan kebutuhan kami. Dalam panduan ini, kita telah membahas tiga metode untuk menempatkan div berdampingan Menggunakan CSS dan memberikan contoh terkait.