Question

您好我的布局如下所示，并在Fiddle

#divHeader#divHeader#divHeader

#divleftmenu #divContent
#divleftmenu #divContent
#divleftmenu #divContent
#divleftmenu #divContent

#divFooter#divFooter#divFooter

有没有办法只使用媒体查询和CSS将#divleftmenu移到页脚上方的底部？

即

 #divHeader#divHeader#divHeader

 #divContent
 #divContent
 #divContent
 #divContent

 #divleftmenu 
 #divleftmenu 
 #divleftmenu 
 #divleftmenu 


 #divFooter#divFooter

Answer 1

您需要更改源订单，并停止在断点下浮动侧边栏。为了好，我为你重新格式化了你的代码。我有：

删除了不必要的声明
使用更具描述性的选择器名称
清理空白

Here's your cleaner version：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>A much nicer version.</title>
<style type="text/css">
#header {height: 50px; background: yellow;}
#sidebar {float: left; height: 300px; width: 30%; background:blue;}
#content {float: right; height: 300px; width: 70%; background: #ccc;}
#footer {height: 50px; background: grey; clear:both;}

@media only screen and (max-width: 400px) {
    #sidebar, #content {float: none; width: 100%;}
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="content">Content</div>
<div id="sidebar">Sidebar</div>
<div id="footer">Footer</div>
</body>
</html>

移动div从布局的左下方浮动

1 个答案: