html - div 在宽度为 100% 的容器中向左浮动并隐藏溢出

Question

这是代码：

<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>​

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

谢谢

Answer 1

@media screen and (max-width: 1200px) {
   #container { width: 400px; height: 300px; }
}

使用媒体查询。

Demo，注意内联样式会覆盖外部 CSS，所以我不得不移动#container样式。

Answer 2

我建议你添加

position: relative;

在外容器上 - 然后放

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

在“内部”容器上。然后您可以按照您想要的方式控制它们。重要的是放置'位置：相对;' 在外部容器上，因为内部容器需要绝对的东西……如果这有意义的话。我希望它有所帮助。

Answer 3

那是因为您已将内部 div 的宽度硬编码为 width:400px。

您需要将它们设置为百分比......最好在您的 .inner 类中。

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

如果你想防止它们缩小太多，你也可以在 .inner 中添加一个最小宽度，并将它与 bookcasey 关于@media 查询的评论结合起来，使其在更小的尺寸下更灵活。