كيفية إصلاح صفحات الويب التي تحتوي على مربعات متداخلة

لديك موقع ويب ، لكن مربعات div ليست مصطفة بشكل صحيح. يمكن أن يحدث هذا لعدة أسباب ، خاصةً عندما تفكر في مشاكل الموقع مع divs من موقع ويب إلى آخر. وبالمثل ، قد تتداخل عناصر الصندوق لعدة أسباب ، تتراوح من أخطاء تحديد الموضع إلى مشكلات تجاوز السعة ومشكلات التعويم البسيطة. في معظم الحالات ، سيؤدي إجراء تغيير سريع وسهل على ورقة أنماط موقع الويب الخاص بك إلى حل المشكلة.

1

أضف هامشًا إذا كانت المربعات لا تحتوي حاليًا على هوامش وتتداخل بمقدار صغير فقط. يمكنك تعيين هامش على جانب واحد فقط ، مثل الجانب الأيسر ، إذا كنت تريد فقط استخدام عنصر الهامش لدفع عنصر المربع الآخر بعيدًا. على سبيل المثال ، إذا تم وضع div A و div B بجوار بعضهما البعض وكان div B متداخلًا على الجانب الأيسر ، فيمكنك تعديل ورقة الأنماط لإضافة هامش على الجانب الأيسر إلى div A على النحو التالي:

2

ابحث في ورقة الأنماط الخاصة بك عن قيم تحديد المواقع التي يمكن أن تسبب تداخلًا وتغييرها. إذا كنت تستخدم تحديد الموضع المطلق لترتيب عناصر div الخاصة بموقعك على الويب ، فهذا يعني أنه مجاني للجميع - يمكن لأي عنصر أن يتداخل مع أي عنصر آخر في الصفحة. لذلك إذا كان لديك div A تم ضبطه على 100 بكسل عرضًا و 15 بكسل من أعلى ويسار الصفحة ، فستحتاج div B إلى 115 بكسل على الأقل إلى اليسار حتى لا تتداخل مع div A. يمكنك تحديد موضع من من الأعلى أو الأسفل ومن اليمين أو اليسار.

3

قم بتعيين div بعرض محدد وإخفاء التجاوز. هذا يمنع div من تجاوز الحجم المحدد ويمنع المحتوى من الامتداد ، إذا جاز التعبير. على سبيل المثال ، إذا لم يكن لدى div A عرض معين وقمت بوضع صورة كبيرة فيه ، فسيتم توسيع div تلقائيًا ليلائم الصورة. إذا قمت بتعيين العرض ، فسيستمر عرض الصورة خارج حواف عنصر div ، ولكن لن يتم توسيع div. إذا قمت بإخفاء الفائض ، فستظهر الصورة فقط داخل حدود div ولن توسع العنصر. على سبيل المثال ، لتعيين div A على 200 بكسل عرضًا وعدم تجاوزه ، يمكنك استخدام رمز النمط هذا:

4

استخدم خيار "float" لتكديس مربعات div جنبًا إلى جنب تلقائيًا. على سبيل المثال ، تريد أن يعمل div A كشريط جانبي وأن يعمل div B للاحتفاظ بالمحتوى الخاص بك - يمكنك تحريك كلا الجزأين إلى اليسار ، مما يتسبب في محاذاةهما أفقيًا. لن تتداخل عناصر div العائمة. مثال على عنصرين عائمين يبدو كالتالي: