响应式CSS div彼此重叠 [英] responsive CSS divs overlap each other

问题描述

我有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纯黑色; 
} 
 
 @media屏幕和（最大宽度：1250px）{
＃homepage-blog-posts {
 width：100％; 
 border-right：0; 
} 
＃homepage-twitter {
 display：block; 
宽度：100％; 
 border：1px solid＃F36F25; 
 
 
 $ / code $ / pre 
 
 
这里是一个完整的html和css代码的小提琴：  http://jsfiddle.net/Gb8Fr/   
 
 
 
如果您将屏幕设置为尽可能宽，则divs彼此内联，但随着屏幕变小（使用媒体查询）divs会一个在另一个之上，但我无法保留他们之间的空间和他们开始互相重叠
 
 
 
我怎么能阻止他们这样做？ 
 
解决方案
从 homepage-blog-posts   height：500px  >或添加 overflow：hidden 即可。如果需要，您可以将其作为媒体查询属性的一部分移除。
 
I have this CSS for 2 divs:
#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;
    }
}
here is a fiddle with the full html and css code: http://jsfiddle.net/Gb8Fr/

if you make the screen as wide a possible, the divs are inline with each other but as the screen gets smaller (using media queries) the divs go one above the other but i can't keep the space in between them and they start to overlap each other

how can i stop them from doing this?
解决方案
Remove the height: 500px from homepage-blog-posts or add overflow: hidden to it.  You can remove it as part of the media query property if you need.

                        
这篇关于响应式CSS div彼此重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！