Bạn có một trang web, nhưng các hộp div không xếp hàng đúng. Điều này có thể xảy ra vì một số lý do, đặc biệt là khi bạn xem xét các vấn đề về vị trí với div từ trang web này sang trang web khác. Tương tự, các phần tử hộp có thể chồng lấp vì một vài lý do, từ lỗi định vị đến các vấn đề tràn và các vấn đề nổi đơn giản. Trong hầu hết các trường hợp, một thay đổi nhanh chóng và dễ dàng cho biểu định kiểu trang web của bạn sẽ khắc phục vấn đề.

1.

Thêm một lề nếu các hộp hiện không có lề và chồng chéo chỉ với một lượng nhỏ. Bạn có thể đặt lề ở một bên, chẳng hạn như ở bên trái, nếu bạn chỉ muốn sử dụng phần tử lề để đẩy phần tử hộp khác đi. Ví dụ: nếu div A và div B được đặt cạnh nhau và div B nằm chồng lên nhau ở bên trái, bạn có thể sửa đổi biểu định kiểu của mình để thêm lề bên trái vào div A như sau:

một {chiều rộng: 100px; lề trái: 10px; }

2.

Tìm kiếm biểu định kiểu của bạn cho các giá trị định vị có thể gây ra chồng chéo và thay đổi chúng. Nếu bạn đang sử dụng định vị tuyệt đối để sắp xếp các phần tử div của trang web, thì đó là phần tử miễn phí - mọi phần tử có thể chồng lấp bất kỳ phần tử nào khác trên trang. Vì vậy, nếu bạn có div A được đặt rộng 100 pixel và 15 pixel từ trên cùng và bên trái của trang, div B sẽ cần ít nhất 115 pixel ở bên trái để không chồng chéo div A. Bạn có thể chỉ định vị trí từ trên cùng hoặc dưới cùng, và từ bên phải hoặc bên trái.

3.

Đặt div với chiều rộng cụ thể và ẩn tràn. Điều này ngăn div vượt quá kích thước quy định và ngăn nội dung tràn ra ngoài, có thể nói như vậy. Ví dụ: nếu div A không có chiều rộng được đặt và bạn đặt một hình ảnh lớn vào đó, div sẽ tự động mở rộng để chứa hình ảnh. Nếu bạn đặt chiều rộng, hình ảnh sẽ vẫn hiển thị ngoài các cạnh của div, nhưng div sẽ không mở rộng. Nếu bạn ẩn phần tràn, hình ảnh sẽ chỉ hiển thị trong ranh giới của div và sẽ không mở rộng phần tử. Ví dụ: để đặt div A rộng 200 pixel và không tràn, bạn sẽ sử dụng mã kiểu này:

một {chiều rộng: 200px; tràn: ẩn; }

4.

Sử dụng tùy chọn "float" để tự động xếp các hộp div cạnh nhau. Chẳng hạn, bạn muốn div A hoạt động như một thanh bên và div B để giữ nội dung của bạn - bạn có thể thả cả hai div sang trái, do đó làm cho chúng thẳng hàng theo chiều ngang. Các phần tử div nổi sẽ không chồng lấp. Một ví dụ về hai yếu tố nổi trông giống như thế này:

một {chiều rộng: 150px; phao: trái; }

b {chiều rộng: 400px; phao: trái; }

Lời khuyên

• Nếu bạn sử dụng Firefox, bạn có thể nhấp chuột phải vào hộp và chọn "Kiểm tra phần tử". Điều này cung cấp cho bạn một phác thảo trực quan của từng yếu tố thường có thể giúp bạn xác định vấn đề đặc biệt khó khăn.
• Bạn có thể đặt tràn chỉ để ẩn trên trục x hoặc y bằng cách sử dụng "overflow-x" hoặc "overflow-y."