प्रतिशत-चौड़ाई divs निश्चित चौड़ाई div के बाद

Question

मैं सीएसएस और एचटीएमएल के साथ निम्न लेआउट प्राप्त करने के लिए कोशिश कर रहा हूँ:

_____________________________________________________________________________ 
| div1 33%   | div2 33%   | div3 33%   | div4 200px | 
————————————————————————————————————————————————————————————————————————————— 

स्पष्ट है कि, मैं div1, DIV2, DIV3 में से एक तिहाई पर कब्जा करना चाहते हैं 200px div के बाद चौड़ाई शेष है।

मैं क्या कोशिश की है:

1. होने div1, DIV2, DIV3, एक कंटेनर div
2. में फिर सही करने के लिए Div4 चल और यह 200px की चौड़ाई दे रही है।

मैंने कई अन्य चीजों की कोशिश की है, इसका कोई फायदा नहीं हुआ है। मैं इसके साथ किसी भी मदद की सराहना करता हूं। मैं अक्सर एसओ पर पोस्ट नहीं करता; कृपया मुझे माफ़ कर दो अगर मैं शिष्टाचार के किसी नियम को तोड़ रहा हूं।

Answer 1

आपको बाकी को ठीक करने के लिए पैडिंग के साथ गड़बड़ करनी होगी, लेकिन नीचे एक कामकाजी पहेली और कोड है। खराब नामकरण सम्मेलनों के बारे में खेद है, लेकिन आपको जो कुछ चाहिए उसे बदलने में सक्षम होना चाहिए। चीयर्स!

http://jsfiddle.net/8HgHt/

HTML:

<div class="whole_container"> 

    <div class="third_holder"> 
     <div class="third"> 
     </div> 
     <div class="third"> 
     </div> 
     <div class="third"> 
     </div> 
    </div> 

    <div class="absolute_div">  
    </div> 
</div> 

सीएसएस:

.third { 
    padding: 0; 
    background-color: gray; 
    height: 100px; 
    float: left; 
    display: table-cell; 
    width: 33%; 
} 

.third:hover { 
    background-color: red; 
} 

.third_holder { 
    float: left; 
    width: 100%; 
    display: table-cell; 
} 

.absolute_div { 
    width: 200px; 
    display: table-cell; 
    background-color: silver; 
} 

.whole_container { 
    width: 100%; 
    display: table;  
} 

Answer 2

आप इस्तेमाल कर सकते हैं calc

Jsfiddle Demo

सीएसएस

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; /* accounting for borders */ 
} 

.wrapper { 
    width:80%; /* or any width */ 
    margin:10px auto; /* for visualisation purposes only */ 
    overflow:hidden; /* float containment */ 
} 

.wrapper div { 
    float:left; 
    height:100px; 
} 

.fixed { 
    width:200px; 
    background: lightblue; 
} 

.percent { 
    width:calc((100% - 200px)/3); /* the magic bit */ 
    background: lightgreen; 
    border:1px solid grey; 
} 

समर्थन IE9 & अप - http://caniuse.com/calc

Answer 3

यह आपकी मदद कर सकते हैं: http://jsfiddle.net/GUcCa/1/

एचटीएमएल

<div class="border block" id="fixd"> 
    div4 
</div> 
<div class="border2 block" id="floating"> 
<div class="border block"> 
    div1 
</div> 
<div class="border block"> 
    div2 
</div> 
<div class="border block"> 
    div3 
</div> 
</div> 

सीएसएस

.border{ 
    border-style: dotted; 
    border-width: 1px; 
} 
.border2{ 
    border-style: solid; 
    border-width: 1px; 
} 
.block{ 
    display: inline-block; 
    width:33%; 
} 
#fixd{ 
    width:200px; 
    float:right; 
} 
#floating{ 
    width:100%; 
} 

jQuery

var fxdWidth = parseInt($('#fixd').css("width").replace("px",'')); 
var totalWidth = parseInt($('#fixd').parent().css("width").replace("px",'')); 
$('#floating').css("width",totalWidth-fxdWidth+ "px");