एक 100% चौड़ाई के साथ div और एक पंक्ति

Question

में दो तय divs मैं एक पंक्ति में तीन divs की जरूरत है।

एक आकार 200px, दूसरी 300px और पिछले div होना चाहिए क्या बचा है है।

एक नई पंक्ति में मेरा आखिरी div क्यों है?

<div style="float: left; width: 200px; background: #223355">a</div> 
<div style="float: left; width: 300px; background: #223344">b</div> 
<div style="float: left; width: 100%; background: #334455">c</div> 

Answer 1

के रूप में अन्य लोगों ने कहा 100% पेज 100% चौड़ाई है .. लेकिन मैं उपयोगकर्ता के लिए जो कहते हैं कि यह 'सादे' सीएसएस

<div style="float: left; width: 200px; background: #223355">a</div> 
<div style="float: left; width: 300px; background: #223344">b</div> 
<div style="overflow: hidden; background: #334455">c</div> 

Answer 2

width: 100% निर्दिष्ट करके, आप तृतीय div बता दिया है क्योंकि पेज की पूरी चौड़ाई, न सिर्फ क्या ऐसा शेष को भरने के लिए।

<div style="float: left; width: 100%"> 
    <div style="margin-left: 500px; background: #334455">c</div> 
</div> 

<div style="float: left; width: 500px; margin-left: -100%"> 
    <div style="width: 300px; float: left; background: #223355">a</div> 
    <div style="width: 200px; float: right; background: #223344">b</div> 
</div> 

किस तरह आप इसे करना चाहते हैं प्रस्तुत करना चाहिए: आवरण div रों की एक जोड़ी जोड़कर, आप कुछ इस तरह मिल सकती है।

Answer 3

आप 100% चौड़ाई के लिए यह निर्धारित किया है क्योंकि। एक सापेक्ष चौड़ाई, जैसे आपका प्रतिशत, माता-पिता तत्व की चौड़ाई पर लागू होता है। तो यदि उन 3 divs के लिए आपका कंटेनर 600px था, तो आप अपने तीसरे div के साथ 600px का 100% लेते हैं, न कि "बचे हुए" स्थान जो अन्य दो तत्वों का उपयोग होता है।

तुम क्या चाहते सादे सीएसएस के साथ पूरा नहीं किया जा सकता है। आपको जावास्क्रिप्ट के माध्यम से शेष स्थान की गणना करने की आवश्यकता होगी और तीसरे div की चौड़ाई को इस तरह सेट करें, या इसे निश्चित-चौड़ाई भी बनाएं।

Answer 4

तुम सिर्फ करने के लिए है नहीं करना चाहिए के साथ नहीं किया जा सकता से असहमत फ्लोट को हटाएं: बाएं; काम करने के लिए आखिरी div पर?