javascript - 给定三个水平对齐的 div，如何在浏览器窗口调整大小时使中心 div 清除其他两个？

Question

要了解更多细节，请考虑以下内容:

• 我有一排三个 div R(右)、C(中)和 L(左)。
• 它们被封装在父 div Container
• Container 具有 css 样式 display:inline-block
• 我有 L 向左浮动
• 我有 R 向右浮动。
• 我通过设置 margin: auto 使 C 居中。

我的问题:

我希望中间的 div 居中，直到 R 和 L 与它发生碰撞.如果发生这种情况(窗口调整大小)。我希望 C 清除两者，并在 R 下方居中。

达到这样的结果的最佳方法是什么？我知道我的设置可能有误，如果是这种情况请告知!

提前致谢!

Answer 1

就像@atdrago 提到的，媒体查询真的是去这里的方式。

如果您的宽度是固定的，您也可以尝试将中心 div 向左浮动并在 .container 元素上放置一个(固定的)max-width。

http://jsfiddle.net/mrhps/2/是一个工作示例。