百分比宽度的div，然后固定宽度的DIV

Question

我试图实现与CSS和HTML布局如下：

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

要清楚，我想DIV1，DIV2，DIV3占据的三分之一在添加200px div之后剩余的宽度。

我曾尝试：

1. 有DIV1，DIV2，DIV3，在一个div容器
2. 然后浮DIV4的权利，并给予它的200像素的宽度。

我已经尝试了各种其他的东西，无济于事。我将不胜感激任何帮助。我不经常发帖，如果我打破礼节的任何规则，请原谅我。

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> 

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

你可以使用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; 
} 

支持IE9 &了 - http://caniuse.com/calc

Answer 3

这可以帮助：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");