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

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