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>

如果屏幕高度小于1200px，我怎么能让内部类的div保持一致？如果屏幕高度小于1200px，则该代码显示一个低于其他代码。

由于

Answer 1

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

使用媒体查询。

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

Answer 2

那是因为你已经用宽度：400px对内部div的宽度进行了硬编码。

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

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

如果你想让它们不要缩小太多，你也可以给.inner添加一个min-width，并将它与bookcasey关于@media查询的评论结合起来，使它在更小的尺寸上更灵活。

Answer 3

我建议你添加

position: relative;

在外部容器上 - 然后放

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

在'内部'容器上。然后你可以按照你想要的方式控制它们。把'position：relative;'放在一边很重要在外部容器上，因为内部容器需要一些绝对的东西......如果这样做的话。我希望它有所帮助。

在宽度为100％的容器中，div向左浮动，隐藏溢出

3 个答案: