Petua: Bergantung pada mengapa anda ingin memecahkan div, anda juga mungkin ingin mempertimbangkan untuk menggunakan tag, yang merupakan unsur tahap inline dan tidak memecah masuk ke barisan berikutnya kecuali tingkah laku lalainya diubah.
Nota: Untuk membuat contoh-contoh ini lebih mudah digunakan dan difahami untuk semua jenis pengguna komputer, kami menggunakan atribut gaya dalam div tersebut. Jika anda berhasrat untuk menggunakan mana-mana contoh ini pada berbilang halaman, kami amat mengesyorkan untuk membuat fail CSS yang boleh cache dengan tetapan gaya dalam fail.
Dalam contoh kami di bawah, kami akan memaparkan div sebagai warna yang berbeza untuk membantu menggambarkan sejauh mana jarak div sedang dan di mana pada skrin div diletakkan.
Tingkah laku lalai
Berikut adalah contoh tingkah laku div lalai elemen blok Div yang menduduki baris pertama unsur yang mengandunginya diikuti oleh kedua Div kedua .
Div one
Div dua
Div one Div dua
Sekalipun anda mengurangkan saiz seorang Div untuk memberi ruang kepada div yang lain, kerana mereka adalah unsur-unsur blok yang akan dibiarkan dengan ruang sebelah Div one dan Div dua di bawah Div one . Untuk memindahkan div ke garisan seterusnya kedua-dua keperluan div mempunyai tetapan paparan inline-blok seperti ditunjukkan di bawah.
Div one
Div dua
Div one Div dua
Berikut adalah beberapa contoh yang berbeza daripada tiga lajur div. Pertama, di bawah tiga lajur div mengikuti idea yang sama seperti contoh di atas kecuali ia menambah div.
Div one
Div dua
Div tiga
Div one Div two Div three
Sudah tentu, jika anda mahu divs untuk menduduki 100% elemen yang mengandungi, ia akan menjadi sedikit lebih rumit. Berikut ini adalah satu contoh bagaimana anda boleh membuat tiga div bersebelahan antara satu sama lain yang menduduki 100% elemen. Dalam contoh di bawah, bukannya menyimpan semua div pada baris yang sama dengan menggunakan blok sebaris, kami mengapungkan div kiri dan kanan.
Div one
Div tiga
Div dua
Div One DIV THREE Div Two
Petua: Walaupun contoh di atas tiga ruang div adalah penyesuaian tambahan responsif seperti menyembunyikan Div tiga dan menyesuaikan lebar juga boleh ditambah ke gaya.