當只有一個浮動時，保持DIV的重疊

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
<!-- 
body { 
background-color: #FFFFFF; 
} 

#side { 
width: 250px; 
float: left; 
height: 400px; 
background: #CCC; 
} 

#main { 
width: 800px; 
margin: 0 auto; 
height: 600px; 
background: #000; 
} 
--> 
</style> 
</head> 

<body> 
<div id="side"></div> 
<div id="main"></div> 
</body> 
</html>

一個非常基本的示例。當我調整瀏覽器窗口大小時，如果＃side元素變得足夠小，它將與#main重疊。我怎樣才能保持這種佈局，但在瀏覽器變得更小的時候，#main會留下#main作爲剩餘的元素，而#main會停留在它的左邊？當只有一個浮動時，保持DIV的重疊

來源

2011-12-27 user985952

是這樣的嗎？ http://jsfiddle.net/WaDp6/ – Virendra 2011-12-27 20:28:20

這就是我最初試過的，但是然後#main元素不再直接在中間@全尺寸的瀏覽器寬度，它是浮動到左邊 – user985952 2011-12-27 20:32:46

這是你想要的嗎？

<style type="text/css"> 
<!-- 
body { 
background-color: #FFFFFF; 
width:1100px; 
} 

#side { 
width: 250px; 
float: left; 
height: 400px; 
background: #CCC; 
} 

#main { 
width: 800px; 
float:left; 
margin: 0 auto; 
height: 600px; 
background: #000; 
} 
--> 
</style>

來源

2011-12-27 20:29:45

這就是我原本嘗試過，但然後#main元素不再直接在中間@全尺寸瀏覽器寬度，它是浮動到左側 – user985952 2011-12-27 20:32:24

您將不得不使用jquery/javascript，因爲它涉及調整大小 – 2011-12-27 20:36:32

當只有一個浮動時，保持DIV的重疊

回答

相關問題