在100％宽度容器内居中div，左右浮动宽度

Question

我想在容器div中对齐3个div，如下所示：

[[左] [中] [右]]

容器div的宽度为100％（无固定宽度），调整容器大小后，居中div应保持居中。

左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固定为400像素，而剩余空间在左右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，另一种选择是给center 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 Model：

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

这将解决纯CSS中的所有居中问题。 只需确保阅读文档并尝试不同的选项，以使您了解其工作原理。