javascript - 100% 宽度容器内的中心 div，左右浮动宽度

Question

我想在容器 div 中对齐 3 个 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/ 查看工作示例