在一個層的浮動圖像，在另一個內部層

Question

我有以下HTML到層內的中心圖像和鏈接：

編輯：一個更好的例子

<style> body { 
background-color:#000; 

color: #FFF; 

} a { font-family: "Broadway", 
Broadway,monospace; font-size: 
14px; color: 

#FFF; } 

#images a { 

width: 24.99%; display: block; 
float: left; text-align: center; } 

#container; { top: 30%; left: 15%; } 
#main { position: absolute; width: 800px; height: 600px; } 
#logo { float:left; background-image:url("1.jpeg"); 
width: 104; height: 100; } 


</style> <div id="main"> <div 
id="logo"> </div> <div 
id="container"> <div id="images"> 
<a href="1.html" > 
    <img src="1.gif" alt="x" width="181" height="173" border="0" 
/><br /> 
    One </a> <a href="2.html" > 
    <img src="2.gif" alt="x" width="181" height="173" border="0" 
/><br /> 
    Two </a> <a href="3.html" > 
    <img src="3.gif" alt="x" width="181" height="173" border="0" 
/><br /> 
    Three </a> <a href="4.html" > 
    <img src="4.gif" alt="x" width="181" height="173" border="0" 
/><br /> 
    Four </a> </div></div></div> 

Answer 1

1. 主要div有一個寬度爲800px，因此浮動的logo div（104px）+ 4個圖像（每個25％）對於一行太大，因此最終圖像將包裝到下面的行中。取消浮動徽標div將在最左邊的新行上啓動圖像。

2. 缺省位置是靜態的 - 所以left和top不起作用。

3. 在容器div上設置position:relative; - 儘管如此，要小心IE6，因爲位置：如果我沒有記錯的話，相對有點有趣。