Question

是否可以有两个浮点数，其中.left宽度为像素，.right为百分比？因此，每当.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元素不是500px宽，而是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;
}

另外，从#wrap中移除hight，你不需要它...

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 （稍微展开一下框）。

两个不同宽度风格的花车

3 个答案: