Kiat: Tergantung pada mengapa Anda ingin memecah div, Anda mungkin juga ingin mempertimbangkan untuk menggunakan tag, yang merupakan elemen level sebaris dan tidak pecah ke baris berikutnya kecuali perilaku defaultnya diubah.
Catatan: Untuk membuat contoh-contoh ini lebih mudah digunakan dan dipahami untuk semua jenis pengguna komputer, kami menggunakan atribut style di div. Jika Anda bermaksud menggunakan salah satu dari contoh ini di beberapa halaman, kami sangat menyarankan untuk membuat file CSS yang dapat di-cache dengan pengaturan style di file tersebut.
Dalam contoh kami di bawah ini, kami akan menunjukkan divs sebagai warna yang berbeda untuk membantu mengilustrasikan berapa banyak jarak div yang ditempati dan di mana pada layar div ditempatkan.
Perilaku default
Di bawah ini adalah contoh perilaku div default dari elemen blok Div satu yang menempati baris pertama dari elemen yang berisi diikuti oleh Div kedua .
Div satu
Div dua
Div satu Div dua
Bahkan jika Anda mengurangi ukuran satu Div untuk memberikan ruang bagi div lainnya, karena mereka adalah elemen blok Anda akan dibiarkan dengan ruang di sebelah Div satu dan Div dua di bawah Div satu . Untuk memindahkan div ke baris berikutnya, keduanya perlu memiliki pengaturan tampilan inline-block seperti yang ditunjukkan di bawah ini.
Div satu
Div dua
Div satu Div dua
Berikut adalah beberapa contoh div tiga kolom yang berbeda. Pertama, div kolom di bawah tiga mengikuti ide yang sama seperti contoh di atas kecuali itu menambahkan div.
Div satu
Div dua
Div tiga
Div satu Div dua Div tiga
Tentu saja, jika Anda ingin div menempati 100% dari elemen yang mengandung, itu menjadi sedikit lebih rumit. Di bawah ini adalah salah satu contoh bagaimana Anda dapat membuat tiga div di sebelah satu sama lain yang menempati 100% elemen. Dalam contoh di bawah ini, alih-alih menjaga semua div di baris yang sama menggunakan inline-block, kita malah mengapung div kiri dan kanan.
Div satu
Div tiga
Div dua
Div One DIV THREE Div Two
Tip: Meskipun contoh di atas dari kolom tiga div responsif kustomisasi tambahan seperti menyembunyikan Div tiga dan menyesuaikan lebar juga dapat ditambahkan ke gaya.