ملء العرض المتبقي للحاوية باستخدام CSS

في سيناريو حيث يكون لديك رأس بثلاثة عناصر مرتبة في صف واحد، الهدف هو جعل العنصر الأوسط يشغل المساحة المتبقية داخل الرأس. ولتحقيق ذلك، أثبت الجمع بين عرض الكتلة المضمنة ووظيفة calc() في CSS فعاليته.

حل الكود

header {
  background: red;
}

#middle {
  background: orange;
  display: inline-block;
}

#right {
  background: green;
  display: inline-block;
  width: calc(100% - 100px);
}

شرح

كتلة مضمنة:
• يضمن عرض العناصر ككتل مضمنة بقائها على نفس السطر وتتصرف مثل الكتلة العناصر، مما يسمح بتعديلات العرض والارتفاع.وظيفة calc():
تقوم هذه الوظيفة بإجراء عمليات رياضية على قيم CSS. وفي هذه الحالة نحسب العرض المتبقي عن طريق طرح العرض الثابت للعنصر الأيسر (100 بكسل) من 100%.
• نتيجة هذا الكود هي أن العنصر الأوسط يمتد ليملأ المساحة المتبقية في الرأس، مع استيعاب محتواه بينما يحافظ العنصر الصحيح على عرضه 100 بكسل.

بديل الحل

إذا كنت تفضل وجود مسافة بين divs، فيمكنك تعديل CSS عن طريق ضبط حجم خط العنصر الخارجي (الرأس) على 0:

الرأس { حجم الخط: 0; ...