كان توافق المتصفح دائمًا مشكلة شائعة في تخطيط CSS.
هاتان الطريقتان لهما المزايا التالية:
1. لا حاجة لاستخدام الاختراق
2. بسيط وفعال ، يمكنك القيام بذلك بنظرة
3. تخطيط هرمي ومعيار
4. الرمز أكثر منطقية وأسهل في التعرف
الطريقة 1: حل الاختلال العائم الناجم عن إضافة تباعد داخلي وخارجي
عادة ما نحتاج إلى تعويم عندما نأمل أن نأمل في تحقيق التأثيرات التالية:
من أجل تحقيق هذا التأثير ، سنضيف هامشًا لجعل العمود مباشرة من التباعد ، وأيضًا إضافة الحدود ، والحشو حتى لا يلتزم النص داخل الحدود. ولكن حدث وضع غير متوقع.
في العمود الثالث ، قم بالتشغيل إلى الأسفل. هذا ليس التأثير الذي تريده. ثم دعونا نحلله. وفقا للأفكار العامة. العرض الإجمالي هو 800 بكسل ، والعمود الأيسر هو 200 ، و Middle 400 ، والعمود الأيمن 200 ، وهو يبدو جيدًا ، ولكن يجب أن يكون هناك تباعد بين هذه الأعمدة ، لذلك تحتاج إلى تغييره: العمود الأيسر 190 ، منتصف 400 ، والعمود الأيمن 190. هل هو بخير؟
ولكن من أجل المظهر الجيد ، أضفت حدود. لكنني نسيت أن الحدود ستزيد أيضًا من العرض. -order 2 = 168 ، حتى لا تتلاشى. لكن ألا تجدها معقدة بعض الشيء؟ سيكون هناك فجوة في هذا التصميم من بعض المتصفحات.
حسنًا ، دعنا نتحدث عن طريقتي. وفقًا للتسلسل الهرمي ، فصل التصميم والشاشة. التصميم هو أنه بالإضافة إلى العرض والملعب الخارجي العائم ، يكون التخطيط أسهل في حسابه. ثم نضيف DIV في عمود التصميم لعرض الحدود ، والتباعد الداخلي والخارجي ، وما إلى ذلك ، لا يمكنك تحديد العرض ، يمكنك التكيف. لتسهيل ذاكرتك ، قمت بالارتجال قصيدة: يجب أن يكون العرض الثابت عائمًا ، بدون حدود أو بقع ، ووضع Div Inside ، وتحديد النمط للعمل!
الطريقة 2: حل العناصر العائمة الداخلية من الطبقة الخارجية
من أجل إنشاء كتالوج منتج أو ألبوم صور ، استخدمنا UL أو N Divs لتطفو.
لكن الأمور تتعارض مع رغباتهم.
الحل لهذا في الواقع بسيط للغاية.
1. يمكنك إضافة تعويم: اليسار ؛
2. طريقة أخرى تتمثل في وضع div لمسح الطفو في النهاية بعد انتهاء التعويم.
3. أضف الارتفاع أو العرض إلى الطبقة الخارجية.