Yüzde genişlikli div'ler Ben css ve html ile aşağıdaki düzenini sağlamak için çalışıyorum

Question

:

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

net olmak gerekirse, ben div1, DIV2, DIV3 üçte birini işgal etmek istiyorum 200px div eklendikten sonra genişliğini kaldı.

denedim Ne:

1. olması div1, DIV2, DIV3, bir kap div
2. yılında Sonra sağa div4 yüzen ve ona 200px genişliğinde vererek.

Başka birçok şeyi denedim, boşuna. Bununla ilgili herhangi bir yardım için minnettar olurum. Çoğunlukla yayınlamıyorum; Herhangi bir kural kuralını ihlal ettiğimde lütfen beni affedin.

Answer 1

Geri kalanını düzeltmek için dolgularla uğraşmanız gerekecek, ancak aşağıda çalışan bir keman ve kod var. Kötü adlandırma kurallarına üzüldüm, ancak ihtiyacınız olan şeyleri değiştirebilmelisiniz. Şerefe!

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

Şunları kullanabilirsiniz 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; 
} 

yukarı Destek IE9 & - Bu yardımcı olabilir 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> 

Zaten (kod) yaptıklarını göstermek ve [jsfiddle] o bir örneğini gönderilmesi için lütfen 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");