1

こんにちは私は以下に示すレイアウトを持っています、そしてフィドルで

#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
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 に答える