Cara Membuat 3 Box Dalam 1 Baris Menggunakan CSS

Cara Membuat 3 Box Dalam 1 Baris Menggunakan CSS

Apabila kamu sudah paham pada seri sebelumnya yaitu tentang display di CSS kamu tidak akan kesulitan untuk membuat 3 box dalam 1 baris menggunakan CSS. Caranya cukup mudah cukup membuat 3 buah div box dengan HTML kemudian pada div tersebut supaya baris boxnya ke samping kanan diberi style display inline-block. Apabila box tersebut tidak diberi style display inline-block maka box akan ditampilkan kebawah.

Untuk lebih jelasnya silakan lihat contoh kode dibawah ini :

Dari contoh kode diatas jika dibuka pada browser maka akan tampil seperti berikut :

Hasil Gambar 3 Box Dalam 1 Baris Menggunakan CSS

Pada kode diatas terdapat 3 buah tag div yang memiliki nama class yang sama yaitu class box pada baris nomor 17 sampai 18, dari nama class itulah yang digunakan CSS untuk selector. Kemudian pada baris nomor 6 sampai 12 terdapat sebuah selector CSS class box yang memberi style 3 buah box tersebut. width:200px; berarti mengatur lebar sebesar 200px, height:200px; berarti mengatur tinggi sebesar 200px, background:green; berarti mengatur background berwarna hijau, display: inline-block; berarti mengatur display inline block tujuannya supaya tampilan box baris ke kanan, dan margin-left: 10px; berarti mengatur margin kanan sebesar 10px.

Apabila kamu yang baru menemukan seri tutorial belajar CSS di cara kode dan masih bingung dengan kode diatas silakan pelajari pada seri display atau untuk lebih jelasnya silakan pelajari seri belajar CSS dasar yang ada di Cara Kode. Karena semua dari property yang digunakan diatas sudah dijelaskan pada seri-seri sebelumnya. Namun apabila kamu ingin bertanya diseri cara membuat 3 box dalam 1 baris menggunakan CSS ini silakan tulis di kolom komentar dibawah.


Kolom Komentar

Related Post