1

嗨，我有如下所示的布局，在Fiddle

#divHeader#divHeader#divHeader

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

#divFooter#divFooter#divFooter

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

IE

 #divHeader#divHeader#divHeader

 #divContent
 #divContent
 #divContent
 #divContent

 #divleftmenu 
 #divleftmenu 
 #divleftmenu 
 #divleftmenu 


 #divFooter#divFooter
4

1 回答 1

2

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

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

这是您的清洁版本：

<!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>

​​​

于 2012-08-10T09:45:58.893 回答