Question

我有2个div的CSS：

#homepage-twitter {
    width:28%;
    height:500px;
    overflow:hidden;
    display:inline;
    float:right;
}
#homepage-blog-posts {
    width:70%;
    height:500px;
    display:inline;
    float:left;
    margin-right:10px;
    border-right:1px solid black;
}

@media screen and (max-width: 1250px) {
    #homepage-blog-posts {
        width:100%;
        border-right:0;
    }
    #homepage-twitter {
        display:block;
        width:100%;
        border:1px solid #F36F25;
    }
}

这里是完整的html和css代码的小提琴： http://jsfiddle.net/Gb8Fr/

如果你让屏幕尽可能宽，div就会相互串联，但随着屏幕变小（使用媒体查询），div会一个接一个地移动，但我不能保持它们之间的空间。他们开始互相重叠

我怎么能阻止他们这样做？

Answer 1

从height: 500px 或添加homepage-blog-posts删除overflow: hidden。如果需要，您可以将其作为媒体查询属性的一部分删除。

响应式CSS div相互重叠

1 个答案: