動態的div寬度

Question

我有一個父DIV中2周內的div：

.parent { 
    width: 200px; 
    height: 200px; 
} 
.div1 { 
    float: left; 
    width: 10px; 
    height: 10px; 
    background-color: blue; 
} 
.div2 { 
    position: relative; 
    height: 100%; 
    width: 100%; 
    right: 0px; 
    float: left; 
    background-color: red; 
} 

的問題是，div2繼承parent div的寬度，而不是剩餘寬度（即190px）並最終DIV2結束於div1以下。

這裏使用的jsfiddle一個例子：http://jsfiddle.net/jZBE6/

怎樣才能讓DIV2有190px的寬度沒有設置一個靜態的寬度是多少？

Answer 1

你可以這樣來做：

.parent{ 
    width:200px; 
    height:200px; 
} 

.div1 { 
    float: left; 
    width:10px; 
    height:10px; 
    background-color:blue; 
} 

.div2{ 
    height:100%; 
    width:90%; 
    float:left; 
    background-color:red; 
} 

你也可以做到這一點不浮動的權利DIV（這是我喜歡的方式）：你真的想萬一

.parent{ 
    width:200px; 
    height:200px; 
} 

.div1 { 
    float: left; 
    width:10px; 
    height:10px; 
    background-color:blue; 
} 

.div2{ 
    height:100%; 
    width:100%; 
    margin-left:10px; 
    background-color:red; 
} 

Answer 2

動態寬度（不只是10px的情況下），你不能使用CSS。但你可以使用JavaScript來動態設置寬度http://jsfiddle.net/jZBE6/19/