两种宽度不同的花车

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（拉伸盒有点看）。