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

Question

要详细了解，请考虑以下事项：

• 我有一行三个div R （右）， C （中）和 L （左）。
• 它们封装在父div Container
中
• 容器的css样式显示：inline-block
• 我 L 漂浮在左边
• 我 R 向右漂浮。
• 我以保证金：自动为中心 C 。

我的问题：
我希望中间div居中，直到 R 和 L 碰撞。如果发生这种情况（窗口调整大小）。我希望 C 清除它们，并将其自身置于 R 之下。

获得这样结果的最佳方法是什么？我知道我可能已经接近了设置错误，请告知是否是这种情况！

提前致谢！

Answer 1

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

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

http://jsfiddle.net/mrhps/2/是一个有效的例子。

Answer 2

会有评论，但声誉不够。无论如何，你需要一个监听器来调整大小 - 这将是令人讨厌的。媒体查询是提到的方式。

is a working example

.C {
    margin: 0 auto;
    background-color: blue;
    @media (max-width: 20em) {
        clear: left;
        float: right;
    }
}

对不起新来的，似乎我需要从jfiddle添加代码来发布链接... oO