两个不同宽度样式的浮动

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 元素的宽度不是 500 像素，而是 600 像素。

#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);
}

这是一个演示

更新：

如果右侧比左侧高，那么您需要将右侧的样式更改为：

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

另外，从#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;
}

这是一个演示（将盒子拉伸一点即可看到）。