我正在为网站使用响应式设计，但无法将元素移到正确的位置。对于@media屏幕和（最大宽度：790像素），我将其中两个块设置为一个在另一个下面移动，然后将其下面的块推到侧面而不是下面。请在此处查看站点并调整浏览器窗口，以更好地了解问题http://www.concept82.com/rd/grrrr.html。
这是我的代码：
<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>
先感谢您。
最佳答案
没有float: clear;这样的东西，您想要的是float: none;
@media screen and (max-width: 790px) {
#logo, #nav {
width: 100%;
float: none; /*fixed this to say none instead of clear */
}