Css 使用响应性网页设计…div不在彼此下方移动…推到一边_Css_Responsive Design

Css 使用响应性网页设计…div不在彼此下方移动…推到一边

css responsive-design

Css 使用响应性网页设计…div不在彼此下方移动…推到一边,css,responsive-design,Css,Responsive Design,我正在为一个网站使用响应式设计，我在元素移动到正确的位置时遇到了问题。对于@media screen和（最大宽度：790px），我已经设置了两个块，将其中一个块移动到另一个块的下面，但是它们下面的块被推到一边而不是下面。请查看此处的网站并调整浏览器窗口以更好地了解问题这是我的密码： <style> body { margin: 0px; font-size: 100%; } img { max-width: 100%; } #wrapper { margin-right: auto

我正在为一个网站使用响应式设计，我在元素移动到正确的位置时遇到了问题。对于@media screen和（最大宽度：790px），我已经设置了两个块，将其中一个块移动到另一个块的下面，但是它们下面的块被推到一边而不是下面。请查看此处的网站并调整浏览器窗口以更好地了解问题

这是我的密码：

<style>
body {
margin: 0px;
font-size: 100%;
}
img {
max-width: 100%;
}
#wrapper {
margin-right: auto;
margin-left: auto;
width: 100%;
max-width: 1500px;
}
#tncontainer{
width: 100%;
height: 35px;
background-color: #B30000;
}
#topnav {
width: 96%;
height: 35px;
margin: 0 auto;
max-width: 960px;
}
#mncontainer {
width: 100%;
background-color: #FFF;
height: 150px;
}
#mainnav {
width: 96%; /*960*/
height: 150px;
margin: 0 auto;
max-width: 960px;
background-color: #CFF;
}
#logo {
width: 20%; /*200*/
height: 150px;
float: left;
background-color: #CCC;
}
#nav {
width: 79%; /*760*/
float: right;
height: 150px;
background-color: #666;
z-index: 1;
}
#cicontainer {
position: relative;
display: block;
height: 450px;
width: 100%;
max-width: 1500px;
}
#coverimagecenter {
background: url(http://www.concept82.com/rd/images/coverimage2.jpg) no-repeat center;
height: 450px;
background-size: cover;
overflow: hidden;
}
@media screen and (max-width: 790px) {
#logo, #nav {
    width: 100%;
    float: clear;
}
}
</style>

<body>
<div id="wrapper">
<div id="tncontainer">
    <div id="topnav">
    </div>
</div>
<div id="mncontainer">
    <div id="mainnav">
    <div id="logo">
    </div>
    <div id="nav">
    </div>
</div>
</div>
<div id="cicontainer">
    <div id="coverimagecenter">
    </div>
</div>
</div>
</body>


身体{
边际：0px；
字体大小：100%；
}
img{
最大宽度：100%；
}
#包装纸{
右边距：自动；
左边距：自动；
宽度：100%；
最大宽度：1500px；
}
#TN集装箱{
宽度：100%；
高度：35px；
背景色：#B30000；
}
#顶置导航{
宽度：96%；
高度：35px；
保证金：0自动；
最大宽度：960像素；
}
#MN集装箱{
宽度：100%；
背景色：#FFF；
高度：150像素；
}
#主导航{
宽度：96%；/*960*/
高度：150像素；
保证金：0自动；
最大宽度：960像素；
背景色：#CFF；
}
#标志{
宽度：20%；/*200*/
高度：150像素；
浮动：左；
背景色：#CCC；
}
#导航{
宽度：79%；/*760*/
浮动：对；
高度：150像素；
背景色：#666；
z指数：1；
}
#容器{
位置：相对位置；
显示：块；
高度：450px；
宽度：100%；
最大宽度：1500px；
}
#coverimagecenter{
背景：url(http://www.concept82.com/rd/images/coverimage2.jpg)无重复中心；
高度：450px；
背景尺寸：封面；
溢出：隐藏；
}
@媒体屏幕和屏幕（最大宽度：790px）{
#标志#导航{
宽度：100%；
浮动：清晰；
}
}

提前谢谢。

没有浮动：清除你想要的是

float:none
@media screen and (max-width: 790px) {
#logo, #nav {
    width: 100%;
    float: none;  /*fixed this to say none instead of clear */
}

谢谢还是没有解决我的问题。现在较低的元素消失了（在图像后面？）。随着窗口的缩小，图像不会在页面上向下移动。@KristinShoffnerTanner这是因为您的#mainnav ID的高度为150px。把它加倍到300px就能解决问题。导航不在图像后面，而是被150px的高度隐藏。延长高度将向下推动图像div并露出“隐藏”的导航。这是一个避免绝对高度的经典例子，除非你有非常具体和有效的理由来设置高度。@KristinShoffnerTanner我强烈建议你学习如何使用某种形式的web开发工具，例如Firebug（用于firefox）或Chrome开发工具。如果您使用的是Chrome，只需点击F12，这将允许您高亮显示元素。我花了10秒钟的时间通过这些工具确定您的问题。它们对于调试这样的布局是必不可少的，并且将极大地帮助您。谢谢！实际上我已经试过了，但是我忘了将#mainnav和#mccontainer都设置为高度：300px，所以它不起作用。抱歉问了这么愚蠢的问题！“我今天在电脑前主演的时间太长了/我还在学习。@KristinShoffnerTanner很乐意帮忙！”！