兩種寬度不同的花車

Question

是否有兩個花車可以有左右寬度的像素和右側的百分比？所以每當.left改變寬度時，.right會自動調整。 例如：

<div id="wrap"> 
<div class="left"></div> 
<div class="right"></div> 
</div> 

CSS代碼：

#wrap { 
    overflow: hidden; 
    width: 500px; 
    margin: 0 auto; 
    padding: 5px 0; 
} 
.left { 
    float: left; 
    width: 200px; 
    height: 100px; 
} 
.right { 
    float: left; 
    width: 100%; 
    height: 100px; 
} 

Answer 1

你並不需要指定正確的百分比在所有的寬度：

我只是修改Blender的例子，因爲他的例子是不正確的#wrap要素不是500像素寬，但600px的替代。

#wrap { 
    overflow: hidden; 
    height: 100px; 

    padding: 5px 0; 

    width: 500px; 
    margin: 0 auto; 
} 

.left { 
    width: 100px; 
    height: 100px; 

    float: left; 
    background-color: rgb(220, 200, 200); 
} 

.right { 
    height: 100px; 
    background-color: rgb(200, 200, 220); 
} 

這裏有一個demo

更新：

如果右邊是更高然後離開，那麼你需要正確的風格改成這樣：

.right { 
    height: 300px; 
    background-color: rgb(200, 200, 220); 
    width: 100%; 
    margin-left: 100px; 
} 

此外，從去除HIGHT #wrap，你根本就不需要它...

Answer 2

使用LESScss（lesscss.org）！你能做的就是設置一個變量包含元素的寬度（百分比），再減去從總到自動調整其他

 
@width1: 50%; 
@width2: 100%-@width1; 
.left { 
    width: @width1; 
} 
.right { 
    width: @width2; 
} 

Answer 3

的寬度，這是一點點長，但在概念上理解（我反正）：

#wrap { 
    overflow: hidden; 
    height: 100px; 

    padding: 5px 0; 
    padding-left: 100px; /* Width of static */ 

    width: 500px; 
    margin: 0 auto; 
} 

.left { 
    width: 100px; 
    height: 100px; 

    float: left; 
    margin-left: -100px; /* Negative width of self */ 
} 

.right { 
    height: 100px; 
    width: 100%; 

    float: left; 
} 

這裏有一個demo（拉伸盒有點看）。