صنع اثنين من divs العائمة نفس الارتفاع في html/css

يتمثل أحد الحلول الشائعة في استخدام الجداول ، ولكن قد لا يكون هذا النهج مناسبًا بشكل دلالي. يتضمن أحد الأساليب وضع حشوة كبيرة قاع ، وإنكار هذا الحشوة بهامش أسفل سلبي ، ويحيط بـ divs مع حاوية ذات تدفق خفي.

تطبيق

الفائض: مخفي. العرض: 100 ٪ ؛ } #اليسار { تعويم: اليسار. العرض: 50 ٪ ؛ خلفية اللون: البرتقالي. حشو القاع: 500em ؛ القاع الهامش: -500em ؛ } #اليمنى { تعويم: اليسار. العرض: 50 ٪ ؛ يمين الهامش: -1px ؛ / * لتوافق IE */ الحدود اليسرى: 1 بكسل سوداء صلبة. لون الخلفية: أحمر. حشو القاع: 500em ؛ القاع الهامش: -500em ؛ }

في html ، قم بإنشاء حاوية div واثنان من divs طفل:

يلغي الحشوة السفلية الكبيرة والهامش السلبي بعضهما البعض ، مما يسمح لـ DIVs بتناول المساحة الرأسية التي يحتاجونها فقط. تضمن الحاوية ذات الفائض المخفي أن أي محتوى فائض غير مرئي.

الاستنتاج

إنه يحاكي بشكل فعال سلوك جدول دون إدخال ترميز غير ضروري.