在一个层的浮动图像，在另一个内部层

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，因为位置：如果我没有记错的话，相对有点有趣。