Cara Memperbaiki Halaman Web Yang Mempunyai Kotak Bertindih

Anda mempunyai laman web, tetapi kotak div tidak berbaris dengan betul. Ini boleh berlaku kerana beberapa sebab, terutamanya apabila anda mempertimbangkan masalah kedudukan dengan pembahagi dari satu laman web ke laman web yang lain. Begitu juga, elemen kotak mungkin bertindih untuk beberapa sebab, mulai dari kesalahan penentuan kedudukan hingga masalah limpahan dan masalah pengapungan sederhana. Dalam kebanyakan kes, perubahan cepat dan mudah pada helaian gaya laman web anda akan menyelesaikan masalahnya.

1

Tambahkan margin jika kotak pada masa ini tidak mempunyai margin dan tumpang tindih dengan jumlah yang sedikit. Anda boleh menetapkan margin di satu sisi, seperti di sebelah kiri, jika anda hanya mahu menggunakan elemen margin untuk menolak elemen kotak yang lain. Contohnya, jika div A dan div B diletakkan bersebelahan dan div B bertindih di sebelah kiri, anda boleh mengubah helaian gaya anda untuk menambahkan margin sisi kiri ke div A seperti berikut:

2

Cari helaian gaya anda untuk menentukan nilai kedudukan yang boleh menyebabkan pertindihan dan mengubahnya. Sekiranya anda menggunakan kedudukan mutlak untuk mengatur elemen div laman web anda, maka itu adalah percuma untuk semua - elemen apa pun boleh bertindih dengan elemen lain di halaman. Oleh itu, jika anda mempunyai div A set selebar 100 piksel dan 15 piksel dari atas dan kiri halaman, div B harus sekurang-kurangnya 115 piksel ke kiri agar tidak bertindih dengan div A. atas atau bawah, dan dari kanan atau kiri.

3

Tetapkan div dengan lebar tertentu dan sembunyikan limpahan. Ini menghentikan div melebihi ukuran yang ditentukan dan mencegah kandungan tumpah, jadi boleh dikatakan. Sebagai contoh, jika div A tidak memiliki lebar yang ditetapkan dan anda meletakkan gambar besar di dalamnya, div akan berkembang secara automatik untuk menampung gambar tersebut. Sekiranya anda menetapkan lebar, gambar akan tetap muncul di luar tepi div, tetapi div tidak akan berkembang. Sekiranya anda menyembunyikan limpahan, gambar hanya akan ditunjukkan dalam sempadan div dan tidak akan mengembangkan elemen. Sebagai contoh, untuk menetapkan div A selebar 200 piksel dan tidak melimpah, anda akan menggunakan kod gaya ini:

4

Gunakan pilihan "float" untuk menyusun kotak div secara bersebelahan secara automatik. Sebagai contoh, anda mahu div A bertindak sebagai bar sisi dan div B untuk menahan kandungan anda - anda boleh mengapungkan kedua div ke kiri, sehingga menyebabkannya sejajar secara mendatar. Unsur div terapung tidak akan bertindih. Contoh dua elemen terapung kelihatan seperti ini: