Bagaimana mencegah div agar tidak melanggar ke baris berikutnya
HTML
Bergantung pada mengapa Anda ingin merusak div, pertimbangkan juga tag . Ini adalah elemen tingkat sebaris dan tidak merusak baris berikutnya kecuali perilaku defaultnya diubah.
Untuk membuat contoh ini lebih mudah digunakan dan dipahami untuk semua jenis pengguna komputer, kami menggunakan atribut style di div. Jika Anda ingin menggunakan salah satu contoh ini di beberapa halaman, kami sangat menyarankan untuk membuat file CSS yang dapat disimpan dalam cache dengan pengaturan gaya di file tersebut.
Di bawah ini, kami akan menunjukkan div sebagai warna berbeda untuk membantu menggambarkan seberapa banyak ruang yang ditempati di tempat mereka ditempatkan di layar.
Perilaku
default
Di bawah ini adalah contoh perilaku div default dari elemen blok Div satu menempati baris pertama dari elemen penampungnya diikuti oleh yang kedua Div dua.
Div satu
Div dua
Kode HTML
Div one
Div two
Atur ukuran dan buat sebaris
Karena mereka adalah elemen blok, saat memperkecil ukuran Div satu untuk memberi ruang bagi div lainnya, Anda memiliki ruang di sebelahnya Div satu dan Div dua di bawah Div satu. Untuk memindahkan div ke baris berikutnya, kedua div harus memiliki setelan tampilan blok sebaris seperti yang ditunjukkan di bawah ini.
Div satu
Div dua
Kode HTML
Div one
Div two
Membuat div tiga kolom
Di bawah ini adalah beberapa contoh berbeda dari div tiga kolom. Pertama, div tiga kolom di bawah mengikuti ide yang sama seperti contoh di atas kecuali menambahkan div.
Div satu
Div dua
Div tiga
Kode HTML
Div one
Div two
Div three
Tentu saja, jika Anda ingin div menempati 100% elemen yang memuatnya, itu menjadi sedikit lebih rumit. Di bawah ini adalah salah satu contoh bagaimana Anda bisa membuat tiga div bersebelahan yang menempati 100% elemen. Pada contoh di bawah ini, alih-alih menyimpan semua div pada baris yang sama menggunakan blok-inline, kita mengapung div kiri dan kanan.
Div satu
Div tiga
Kode HTML
Div One
DIV THREE
Tip
Meskipun contoh di atas dari kolom tiga div responsif, penyesuaian tambahan seperti menyembunyikan Div tiga dan mengatur lebar juga bisa ditambahkan.
Di bawah ini adalah contoh perilaku div default dari elemen blok Div satu menempati baris pertama dari elemen penampungnya diikuti oleh yang kedua Div dua.
Div satu
Div dua
Kode HTML
Div oneDiv two
Atur ukuran dan buat sebaris
Karena mereka adalah elemen blok, saat memperkecil ukuran Div satu untuk memberi ruang bagi div lainnya, Anda memiliki ruang di sebelahnya Div satu dan Div dua di bawah Div satu. Untuk memindahkan div ke baris berikutnya, kedua div harus memiliki setelan tampilan blok sebaris seperti yang ditunjukkan di bawah ini.
Div satu
Div dua
Kode HTML
Div oneDiv two
Membuat div tiga kolom
Di bawah ini adalah beberapa contoh berbeda dari div tiga kolom. Pertama, div tiga kolom di bawah mengikuti ide yang sama seperti contoh di atas kecuali menambahkan div.
Div satu
Div dua
Div tiga
Kode HTML
Div oneDiv twoDiv three
Tentu saja, jika Anda ingin div menempati 100% elemen yang memuatnya, itu menjadi sedikit lebih rumit. Di bawah ini adalah salah satu contoh bagaimana Anda bisa membuat tiga div bersebelahan yang menempati 100% elemen. Pada contoh di bawah ini, alih-alih menyimpan semua div pada baris yang sama menggunakan blok-inline, kita mengapung div kiri dan kanan.
Div satu
Div tiga
Kode HTML
Div OneDIV THREE
Meskipun contoh di atas dari kolom tiga div responsif, penyesuaian tambahan seperti menyembunyikan Div tiga dan mengatur lebar juga bisa ditambahkan.