плавающие изображения в слое, внутри другого слоя

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, поэтому плавающий логотип div (104px) + 4 изображения (по 25% каждое) слишком велики для одной строки, поэтому окончательное изображение переносится на строку ниже. Снятие логотипа div запустит изображения на новой строке в крайнем левом углу.

2. Положение по умолчанию статическое - поэтому левый и верхний значения не имеют эффекта.

3. Установить position:relative; в контейнере div - будьте осторожны с IE6, потому что позиция: относительная немного смешно, если я правильно помню.