सीएसएस के साथ एक कंटेनर की शेष चौड़ाई को भरना

ऐसे परिदृश्य में जहां आपके पास एक पंक्ति में व्यवस्थित तीन तत्वों वाला एक हेडर है, लक्ष्य यह है कि मध्य तत्व हेडर के भीतर शेष स्थान पर कब्जा कर ले। इसे प्राप्त करने के लिए, सीएसएस में इनलाइन-ब्लॉक डिस्प्ले और कैल्क() फ़ंक्शन का संयोजन प्रभावी साबित होता है।

कोड समाधान

प्रदान की गई HTML संरचना में एक हेडर में एक छवि, टेक्स्ट के साथ एक मध्य तत्व और एक दायाँ तत्व होता है। उनके लेआउट में हेरफेर करने के लिए, हम सीएसएस को निम्नानुसार लागू करते हैं:

header {
  background: red;
}

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

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

स्पष्टीकरण

• इनलाइन-ब्लॉक: तत्वों को इनलाइन-ब्लॉक के रूप में प्रदर्शित करना सुनिश्चित करता है कि वे एक ही लाइन पर रहें और ब्लॉक की तरह व्यवहार करें तत्व, चौड़ाई और ऊंचाई समायोजन की अनुमति देते हैं।
• calc() फ़ंक्शन: यह फ़ंक्शन गणितीय कार्य करता है सीएसएस मूल्यों पर संचालन। इस मामले में, हम बाएं तत्व की निश्चित चौड़ाई (100px) को 100% से घटाकर शेष चौड़ाई की गणना करते हैं।

इस कोड का परिणाम यह है कि मध्य तत्व शेष स्थान को भरने के लिए फैलता है हेडर में, इसकी सामग्री को समायोजित करते हुए सही तत्व 100px की चौड़ाई बनाए रखता है।

वैकल्पिक समाधान

यदि आप divs के बीच एक स्थान रखना पसंद करते हैं, तो आप बाहरी तत्व (हेडर) के फ़ॉन्ट-आकार को 0 पर सेट करके CSS को संशोधित कर सकते हैं:

header {
  font-size: 0;
  ...
}