एक इनलाइन-ब्लॉक div को शेष चौड़ाई का 100% लें

Question

मेरे पासअन्य div के अंदर 3 div ब्लॉक हैं।

मुझे क्या करना चाहता था उन्हें इनलाइन डाल करने के लिए है, लेकिन पहले 2 div ब्लॉक उनकी सामग्री और पिछले div शेष जगह लेने के अनुसार चौड़ाई लेना चाहिए।

<div class="container"> 
    <div class="red">Red</div> 
    <div class="green">Green</div> 
    <div class="blue">Blue</div> 
</div> 

मैं निश्चित चौड़ाई के उपयोग से बचने की कोशिश करता हूं क्योंकि मुझे इसे एक उत्तरदायी डिजाइन में उपयोग करने की आवश्यकता है।

मैं this fiddle में अपने माता-पिता के बाकी उपलब्ध स्थान को ले सकता हूं और स्क्रीन का आकार बदलने पर उत्तरदायी कार्य कर सकता हूं?

Answer 1

मेरा मानना ​​है कि अगर आप सब पर किसी भी पिक्सेल या प्रतिशत चौड़ाई निर्दिष्ट करें और के रूप में के रूप में ही विस्तृत लाल और हरे रंग के कंटेनर बनाने के लिए नहीं करना चाहते हैं उनके सामग्री, आपको उन्हें .left नामक अपने कंटेनर के अंदर लपेटने की आवश्यकता होगी:

<div class="container"> 
    <div class="left"> 
     <div class="red">Red</div> 
     <div class="green">green</div> 
    </div> 
    <div class="blue">blue</div> 
</div> 

यदि आप बाईं ओर .left तैरते हैं, और बाईं ओर .left div भी तैरते हैं, तो अब आपको इनलाइन-ब्लॉक तत्वों को निर्दिष्ट करने की आवश्यकता नहीं है। नीला कंटेनर उतना ही स्थान लेगा जितना कि यह .container के अंत तक उपलब्ध है।

.left { 
    float: left; 
} 

.left div { 
    float: left; 
} 

Fiddle

संपादित

बेवकूफ मुझे, .left कंटेनर जाहिर है जब तक की जरूरत नहीं है तुम बस अपनी लाल और हरे रंग ब्लॉकों के लिए float: left जोड़ने, जैसे @Ennui कहा के रूप में टिप्पणियों में ऊपर :)

Updated fiddle

Answer 2

इस के लिए अपने सीएसएस बदलें:

.container{border: 2px solid black; padding: 5px; position: relative; width: 100%;} 

.container div {height: 20px;} 

.red{border: 2px solid red; display: block; float: left;} 

.green{border: 2px solid green; display: block; float: left;} 

.blue{border: 2px solid blue;} 

क्रोम में परीक्षण किया गया

संपादित

बेवकूफ मुझे, इस काँटेदार jsfiddle है: http://jsfiddle.net/BWRVk/

Answer 3

आप इसे करना चाहते हैं उत्तरदायी रहें, divs% widths दें।

http://jsfiddle.net/feitla/6kLVn/6/

.container div {height: 20px;} 

.red{border: 2px solid red;width:10%;display:inline;} 

.green{border: 2px solid green;width:10%; display: inline;} 

.blue{border: 2px solid blue;display:inline-block;width:80%;} 

Answer 4

मुझे लगता है कि यह सब क्या आप अपने चित्रों होना चाहते हैं पर आधारित है। मैंने छवियों पर%% का उपयोग यह दिखाने के लिए किया कि उन्हें उत्तरदायी डिजाइन के अनुसार आकार बदला जा सकता है। http://jsfiddle.net/6kLVn/7/

एचटीएमएल

<div class="container"> 
    <div class="red">Red</div> 
    <div class="green">green</div> 
    <div class="blue">blue</div> 
</div> 

सीएसएस

.container{border: 2px solid black; padding: 5px; position: relative; margin:0px; width: 100%;} 

.container div {height: 20px; display: inline-block; padding:0px; margin:0px;} 

.red{border: 2px solid red; width:31%; } 

.green{border: 2px solid green;width:31%;} 

.blue{border: 2px solid blue;width:31%;} 

Answer 5

float: left लाल और हरे और नीले रंग मिल width: clac(100% - 100px)

.blue { 
    width: calc(100% - 100px); 
} 

http://jsfiddle.net/6kLVn/190/