एकाधिक (गतिशील रूप से आकार) divs 100% चौड़ाई कैसे साझा कर सकते हैं?

Question

मैं निम्नलिखित एचटीएमएल संरचना मिल गया है:

<div style="width:100%"> 
    <div style="float:left; width:70%"><input /></div> 
    <div style="float:left">element with unknown width</div> 
    <div style="float:left; width=30%"><input /></div> 
    <div style="clear:both" /> 
</div> 

क्या मैं प्राप्त करना चाहते हैं निम्नलिखित है:

• (आवश्यकता) बाहरी div स्क्रीन की चौड़ाई के 100% का उपयोग करना चाहिए
• (आवश्यकता) तीन आंतरिक divs को इन 100% को अपने आप में साझा करना चाहिए
• (आवश्यकता) दूसरे div, दोनों अन्य के बीच, अज्ञात मात्रा में स्थान
• दो इनपुट क्षेत्रों सभी शेष स्थान का उपयोग करना चाहिए, लेकिन जबकि तीसरे एक 30%

कुछ इस तरह कैसे किया जा सकता है हो जाता है पहले एक, शेष का 70% प्राप्त होगा?

Answer 1

@RoToRa: टिप के लिए धन्यवाद। मुझे लगता है कि यह इस समस्या के लिए अंतिम समाधान है:

वितरित करें 70:30

<div style="display:table; width:100%"> 
    <div style="display:table-cell; width:70%"> 
    <input style="width:100%"/> 
    </div> 
    <div style="display:table-cell; width:1px"> 
    <a style="white-space:nowrap">Some Text</a> 
    </div> 
    <div style="display:table-cell; width=30%"> 
    <input style="width:100%;" /> 
    </div> 
</div> 

समाधान है, जिसकी पहली इनपुट क्षेत्र पकड़ लेता है सभी अतिरिक्त अंतरिक्ष, और अंतिम इनपुट क्षेत्र तय किया है चौड़ाई:

<div style="display:table; width:100%"> 
    <div style="display:table-cell; width:100%"> 
    <input style="width:100%"/> 
    </div> 
    <div style="display:table-cell; width:1px"> 
    <a style="white-space:nowrap">Some Text</a> 
    </div> 
    <div style="display:table-cell; width=100px"> 
    <input style="width:100px;" /> 
    </div> 
</div> 

Answer 2

मध्य div की चौड़ाई निर्धारित करने वाला क्या है? चूंकि मेरा प्रतिनिधि स्कोर सबसे अच्छा होगा, मैं बहुत अनुभवी डेवलपर नहीं हूं, लेकिन मुझे लगता है कि यह आपकी समस्या का क्रूक्स है। यदि यह कर्कश रूप से कोई फर्क नहीं पड़ता कि मध्य कॉलम की चौड़ाई क्या है तो 70%, 0%, 30% और 7%, 9 0%, 3% का div अनुपात है। आपकी समस्या के गणितीय रूप से समतुल्य उत्तर हैं। तो आपका समाधान उतना सरल हो सकता है:

<div style="width:100%"> 
    <div style="float:left; width:7%">Some elements here.</div> 
    <div style="float:left; width:90%">Some more elements here.</div> 
    <div style="float:left; width:3%">Even more elements here.</div> 
</div> 

Answer 3

टेबल्स को बुरा माना जाता है, लेकिन वे समस्या को हल करने लगते हैं। मैं अभी भी, जावास्क्रिप्ट या तालिकाओं के बिना एक समाधान में दिलचस्पी रखता हूँ किसी को भी एक मिल सकता है,

अनुपात 70:30

<table width="100%"> 
    <tr> 
    <td style="width:70%"> 
     <input style="width:100%"/> 
    </td> 
    <td> 
     <a>Some Text</a> 
    </td> 
    <td style="width:30%"> 
     <input style="width:100%"/> 
    </td> 
    </tr> 
</table> 

पहले इनपुट क्षेत्र सभी शेष स्थान का उपयोग करता साथ अंतरिक्ष शेष वितरित ... जबकि अंतिम बॉक्स में एक निश्चित चौड़ाई है:

<table width="100%"> 
    <tr> 
    <td style="width:100%"> 
     <input style="width:100%"/> 
    </td> 
    <td> 
     <a>Some Text</a> 
    </td> 
    <td style="width:100px"> 
     <input style="width:100px"/> 
    </td> 
    </tr> 
</table>