Javascript 100%宽度容器内的中心div，具有动态宽度左侧和右侧浮动

我希望在容器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>

问题是，左侧和右侧不显示，因为没有设置宽度

---

有什么建议吗？

纯CSS无法做到这一点。您需要使用JavaScript。在下面的示例中，中间div固定为400px，而剩余空间在左div和右div之间分割。使用jQuery，您可以

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

---

检查处的工作示例如果要避免使用javascript，另一个选项是为中间div指定一个绝对位置，并创建两个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>

---

如果您只关心Mozilla和WebKit，那么您应该考虑使用Flexible Box型号：

---

这将解决纯CSS中的所有中心问题。请务必阅读文档并使用不同的选项，以便了解它的工作原理。

+1但是，如果浏览页面的浏览器禁用了JavaScript，或者运行速度太慢，用户可能会收到HTMl，请参见页面，我会小心地依赖JavaScript实现基本页面布局，然后让JavaScript启动并重新组装页面布局。对一个类似问题的回答很好地总结了这些限制。没有人会禁用JavaScript，除非这个人仍然生活在远古时代。web上的每个站点都以这样或那样的方式使用javaScript。并非每个站点都启用了javaScript。一些系统管理员会在公司计算机上禁用JS，这样他们就不必担心安全风险，一些使用旧计算机的人会禁用JS，这样他们就可以加快浏览器的速度，处理能力有限的手机不会使用JS。JS应该作为网站行为的渐进增强，而不是依赖它。我将链接到另一个答案，从中再次总结出一个很好的答案。不要看1%的人因为想加快浏览速度而关闭它。从石器时代起，它们的连接和计算机速度一定很慢。这太疯狂了。如果你关闭了网络，你就断开了与网络的连接。快乐的HTML浏览。没有抓住要点。我的意思是，你不应该假设每个人都在使用这项技术，因为如果不使用这项技术，就会被蒙在鼓里。从这个角度来看：不是每个浏览器都会启用JavaScript，即使启用的比例很小，但是每个浏览器都能够呈现HTML和CSS，因此使用HTML和CSS进行页面布局没有风险。然而，依赖JavaScript进行站点布局的风险很小。如果一家银行拥有100万在线用户，并且其网站依赖于JavaScript，那么10k可能没有JS。他们会去其他地方，银行会放贷。