Prozentuale Breite divs durch feste Breite div gefolgt

Question

Ich versuche, das folgende Layout mit CSS und HTML zu erreichen:

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

klar sein, ich will div1, div2, div3 ein Drittel der besetzen verbleibende Breite nach der 200px div hinzugefügt wird.

Was ich versucht habe:

1. Mit div1, div2, div3, in einem Container div
2. Dann DIV4 nach rechts schwebend und ihm eine Breite von 200 Pixel zu geben.

Ich habe verschiedene andere Dinge ausprobiert, vergeblich. Ich würde jede Hilfe mit diesem schätzen. Ich poste nicht oft auf SO; bitte verzeih mir, wenn ich irgendwelche Regeln der Etikette brechen werde.

Answer 1

Sie müssen mit den Polsterungen herumspielen, um den Rest zu beheben, aber unten ist eine funktionierende Geige und der Code. Entschuldigen Sie die schlechten Namenskonventionen, aber Sie sollten in der Lage sein, alles auf das zu ändern, was Sie brauchen. Prost!

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> 

CSS:

.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

könnten Sie verwenden calc

Jsfiddle Demo

CSS

* { 
    -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; 
} 

Unterstützung IE9 & up - http://caniuse.com/calc

Answer 3

Dies kann helfen: http://jsfiddle.net/GUcCa/1/

html

<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> 

css

.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");