移動DIV飄然離開我已經下圖所示的佈局佈局

嗨的底部，並在Fiddle 移動DIV飄然離開我已經下圖所示的佈局佈局

#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

來源

2012-08-10 davey

你能不能給我們的jsfiddle ？我們無法真正理解你的代碼是如何從你的ID的 – Andy 2012-08-10 09:21:27

中展示出來的，創建一個小提琴。如果你還不知道，鏈接是http://jsfiddle.net/ – mtk 2012-08-10 09:24:57

OKay將提供小提琴 – davey 2012-08-10 09:28:00

你需要改變你的源訂單，並停止浮動側邊欄斷點下。爲了更好，我爲你重新設計了你的代碼。我有：

刪除不必要的聲明
使用更具描述性的選擇器名稱
清理空白

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>

來源

2012-08-10 09:45:58

謝謝，但這不會得到div＃左上方的div＃。哎喲只是重新閱讀有關佈局掛起將嘗試它 – davey 2012-08-10 09:50:19

@davey，你只需要不同的初始樣式''右#''例如，或加入'float：right;' – skip405 2012-08-10 09:52:51

這意味着我必須將自己的內容放到正確的位置才能讓它發揮作用。 – davey 2012-08-10 09:54:36

移動DIV飄然離開我已經下圖所示的佈局佈局

回答

相關問題