Masz stronę internetową, ale pola div nie są ustawione prawidłowo. Może się to zdarzyć z kilku powodów, zwłaszcza gdy weźmiesz pod uwagę problemy z pozycją elementów div z jednej strony na drugą. Podobnie, elementy pola mogą się pokrywać z kilku powodów, począwszy od błędów pozycjonowania po problemy z przepełnieniem i proste problemy z float. W większości przypadków szybka i łatwa zmiana arkusza stylów witryny naprawi problem.

1.

Dodaj margines, jeśli pola nie mają obecnie marginesów i pokrywają się tylko w niewielkiej ilości. Możesz ustawić margines tylko po jednej stronie, na przykład po lewej, jeśli chcesz tylko użyć elementu marginesu, aby odepchnąć drugi element pola. Na przykład, jeśli div A i div B są umieszczone obok siebie, a div B nakłada się po lewej stronie, można zmodyfikować arkusz stylów, aby dodać margines z lewej strony do div A w następujący sposób:

a {szerokość: 100 pikseli; margin-left: 10px; }

2.

Wyszukaj w swoim arkuszu stylów wartości pozycjonowania, które mogą powodować nakładanie się i zmieniać je. Jeśli używasz pozycjonowania bezwzględnego do rozmieszczenia elementów div twojej witryny, to jest to opcja dla wszystkich - dowolny element może nakładać się na dowolny inny element na stronie. Jeśli więc masz zestaw div A o szerokości 100 pikseli i 15 pikseli od górnej i lewej strony strony, element div musi mieć co najmniej 115 pikseli w lewo, aby nie nakładać się na działkę A. Możesz określić pozycję z u góry lub u dołu i od prawej lub lewej strony.

3.

Ustaw element div o określonej szerokości i ukryj przepełnienie. To powstrzymuje element div przed przekroczeniem określonego rozmiaru i, że tak powiem, zapobiega przesypywaniu się zawartością. Na przykład, jeśli działka A nie ma ustawionej szerokości i umieścisz w nim duży obraz, element div zostanie automatycznie rozwinięty w celu dostosowania do obrazu. Jeśli ustawisz szerokość, obraz będzie nadal wyświetlany poza krawędziami elementu div, ale element div nie zostanie rozwinięty. Jeśli ukryjesz przepełnienie, obraz wyświetli się tylko w granicach div i nie rozwinie elementu. Na przykład, aby ustawić div A o szerokości 200 pikseli i nie przepełniać, można użyć tego kodu stylu:

a {szerokość: 200 pikseli; przepełnienie: ukryte; }

4.

Użyj opcji "float", aby automatycznie układać pola div obok siebie. Na przykład, chcesz, aby div A działał jako pasek boczny, a div B, aby trzymać twoje treści - możesz unieść oba elementy div w lewo, powodując wyrównanie w poziomie. Elementy pływające div nie będą się nakładać. Przykład dwóch elementów pływających wygląda mniej więcej tak:

a {szerokość: 150 pikseli; float: left; }

b {szerokość: 400 pikseli; float: left; }

Wskazówki

• Jeśli używasz przeglądarki Firefox, możesz kliknąć prawym przyciskiem myszy na polu i wybrać "Sprawdź element". Daje to wizualny zarys każdego elementu, który często pomaga wskazać szczególnie trudny problem.
• Możesz ustawić przepełnienie, aby ukryć tylko na osi X lub Y za pomocą "overflow-x" lub "overflow-y".