Question

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

[[LEFT] [CENTER] [RIGHT]]

容器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中的所有中心问题。请务必阅读文档并使用不同的选项，以便了解它的工作原理。

中心div在100％宽度的容器内，具有动态宽度左右浮动

3 个答案:

检查http://jsfiddle.net/M5Ghx/3/