समान ऑटो चौड़ाई के साथ सीएसएस साइड-बाय-साइड डिवीजन

पैरेंट डीआईवी के भीतर चाइल्ड डीआईवी के लिए समान ऑटो चौड़ाई हासिल करना मुश्किल हो सकता है पारंपरिक फ्लोट और चौड़ाई दृष्टिकोण। हालाँकि, डिस्प्ले: टेबल प्रॉपर्टी का उपयोग एक आधुनिक समाधान प्रदान करता है जो इस कार्यक्षमता को सक्षम बनाता है। ) एक तालिका के रूप में प्रदर्शित करने और एक निश्चित तालिका लेआउट को सक्षम करने के लिए। यह सुनिश्चित करेगा कि चाइल्ड DIV समान चौड़ाई में हों।

उपलब्ध ऊर्ध्वाधर स्थान को निर्दिष्ट करने के लिए मूल DIV की ऊंचाई निर्धारित करें।प्रत्येक चाइल्ड DIV के लिए, डिस्प्ले प्रॉपर्टी को टेबल-सेल पर सेट करें सुनिश्चित करें कि वे अगल-बगल दिखाई दें और उनकी ऊंचाई मूल DIV के समान हो।

1. CSS उदाहरण:
3. #wrapper { प्रदर्शन: तालिका; टेबल-लेआउट: निश्चित; चौड़ाई: 90%; ऊंचाई: 100px; पृष्ठभूमि-रंग: ग्रे; } #रैपर डिव { प्रदर्शन: टेबल-सेल; ऊंचाई: 100px; }

HTML उदाहरण:

#wrapper {
  display: table;
  table-layout: fixed;
  width: 90%;
  height: 100px;
  background-color: Gray;
}

#wrapper div {
  display: table-cell;
  height: 100px;
}

प्रदान किए गए JSFiddle उदाहरण तीन और दो समान-चौड़ाई वाले बच्चे दोनों को प्रदर्शित करते हैं डीआईवी.