Html div向左浮动，容器中隐藏溢出，宽度为100%

代码如下：

<div style="width:100%;height:200px;overflow:hidden;border:1px solid red;" id="container">
<div style="float:left;width:400px;height:100px;border:1px solid green;" class="inner">
first div</div>
<div style="float:left;width:400px;height:100px;border:1px solid green;" class="inner">
second div</div>
<div style="float:left;width:400px;height:100px;border:1px solid green;" class="inner">
third div</div>
</div>​

第一组
第二组
第三组
​

如果屏幕高度小于1200px，我如何使具有类内部的div保持一致？如果屏幕高度小于1200px，该代码将显示一个比另一个低的div

谢谢

使用媒体查询

---

，请注意，内联样式将覆盖外部CSS，因此我必须移动

#容器
样式。
这是因为您已将内部div的宽度硬编码为宽度：400px

您需要将它们设置为百分比。。。最好是在你的内心世界

.inner {
    float:left;
    width:33%;
    height:100px;
    border: 1px solid green;
}

如果你不想让它们收缩太多，你也可以在.inner中添加一个最小宽度，并将其与bookcasey关于@media queries的评论结合起来，使其在较小尺寸时更灵活。
我建议你添加

position: relative;

在外部容器上-然后放置

position: absolute; left: 0; top: 0;

在“内部”容器上。然后你可以按照你想要的方式控制它们。重要的是要把“位置：相对的；”在外部容器上，因为内部容器需要一些绝对的东西来。。。如果说得通的话。我希望它能有所帮助。
我希望使用类inner 200px固定div的宽度。您不能约束容器的外部宽度，而期望浮动元素忽略它们的容器。现在，如果希望它们消失，则必须将它们包含在一个具有固定宽度的容器中，设置为所有内部div的组合宽度。这样，它们将在其容器的上下文中彼此相邻地浮动，但它们的容器将在超出最外层容器宽度的位置消失。查看这个JSFIDLE的例子：我能找到IE7和IE8以及Safari使用css3和@media的修复程序吗？
position: absolute; left: 0; top: 0;