Два поплавка с разным стилем ширины

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

Вам вообще не нужно указывать ширину правой в процентах:

Я только что изменил пример Блендера, поскольку его пример был неверным, так как элемент #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);
}

Вот демо

Обновление:

Если справа выше, чем слева, то вам нужно изменить стиль справа на этот:

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

Кроме того, уберите высоту с #wrap, она вам там все равно не нужна ...

Answer 2

Это немного длинно, но концептуально понятно (для меня в любом случае):

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

Вот демо (немного растяните рамку, чтобы увидеть).

Answer 3

используйте LESScss (lesscss.org)! что вы можете сделать, это установить переменную, которая будет содержать ширину (в процентах) элемента, а затем вычесть это из общей суммы, чтобы автоматически настроить ширину другого

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