Центр div внутри контейнера 100% ширины с динамической шириной влево и вправо плавает

Question

Я хочу, чтобы 3 div были выровнены внутри контейнера div, например:

[[ВЛЕВО] [ЦЕНТР] [ВПРАВО]]

Контейнер div имеет ширину 100% (без фиксированной ширины), а центр div должен оставаться в центре после изменения размера контейнера.

Левый и правый DIV не имеют фиксированной ширины и должны расширяться / сжиматься с контейнером. Центр DIV имеет фиксированную ширину.

У меня есть это:

<div style="width: 100%">
    <div style="float: left; height: 50px;"></div>
    <div style="float: right; height: 50px;"></div>
    <div style="margin: 0 auto; height: 50px; width: 500px;"></div>
</div>

Проблема в том, что левые и правые не отображаются, потому что нет заданной ширины

Есть предложения?

Answer 1

Вы не можете сделать это с чистым CSS. Вам нужно использовать JavaScript. В приведенном ниже примере средний div установлен на 400px, а оставшееся пространство делится между левым и правым div. С JQuery вы можете сделать

function calc() {
    var ww = $(window).width();
    var rem = ww - $('.div2').width();
    $('.div1, .div3').css('width', rem / 2);
}
calc();
$(window).resize(calc);

Проверьте рабочий пример на http://jsfiddle.net/M5Ghx/3/

Answer 2

Другой вариант, если вы хотите отказаться от использования javascript, это дать центру div абсолютную позицию и создать два div для использования в качестве буферов в левом и правом div:

<div style="width: 100%; text-align:center">
    <div style="width:50%; height: 50px; float:left">
        <div style="width:250px; height: 50px; float:right"></div>
    </div>
    <div style="margin-right:auto; margin-left:auto; position:absolute; left:0; right:0; width: 500px;height:50px;"></div>
    <div style="width:50%; height: 50px; float:right">
        <div style="width:250px; height: 50px; float:left"></div>
    </div>
</div>

Answer 3

Если вы заботитесь только о Mozilla и WebKit, то вам стоит воспользоваться моделью Flexible Box:

• http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

Это решит все ваши проблемы.центрирование проблем в чистом CSS.Обязательно прочтите документы и поэкспериментируйте с различными вариантами, чтобы понять, как это работает.