响应式 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

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