html - 响应式 CSS div 相互重叠

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。如果需要，您可以将其作为媒体查询属性的一部分删除。