在 100% 宽度的容器内居中 div，动态宽度左右浮动答案

【问题标题】：Center div inside 100% width container with dynamic width left and right floats在 100% 宽度的容器内居中 div，动态宽度左右浮动
【发布时间】：2011-07-31 06:57:09
【问题描述】：

我想在一个容器 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>

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

有什么建议吗？

【问题讨论】：

标签： javascript jquery html css alignment

【解决方案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/查看工作示例

【讨论】：

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

【解决方案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>

【讨论】：

【解决方案3】：

如果您只关心 Mozilla 和 WebKit，那么您应该考虑使用灵活盒模型：

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

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

【讨论】：