对齐堆叠DIV内的元素

Question

问题描述：

我试图将小猫安排成星形图案，上面有3个DIV“行”。我希望第一排的小猫能够在页面上居中（足够简单）;第二个（或“#middle”）行分别让它们的猫左对齐和右对齐;和第三个（'#bottom'）行让它的猫对齐类似于第二行，但两侧略微缩进。再一次，就像一个明星。

我知道float属性基本上使元素绝对定位，这会折叠底部两行的高度，所以这可能不是正确的答案。但是我也试过text-align并且有利可图。我的大脑是油炸的。我做错了什么？

小提琴：

http://jsfiddle.net/k97CG/1/

HTML结构：

<div id="top">
  <div id="container1" class="containers">
    <div id="cat1">
      <img src="http://placekitten.com/g/125/125" />
    </div>
  </div>
</div>

<div id="middle">
  <div id="container2" class="containers">
    <div id="cat2">
      <img src="http://placekitten.com/g/125/125" />
    </div>
  </div>
  <div id="container3" class="containers">
    <div id="cat3">
      <img src="http://placekitten.com/g/125/125" />
    </div>
  </div>
</div>

<div id="bottom">
  <div id="container4" class="containers">
    <div id="cat4">
      <img src="http://placekitten.com/g/125/125" />
    </div>
  </div>
  <div id="container5" class="containers">
    <div id="cat5">
      <img src="http://placekitten.com/g/125/125" />
    </div>
  </div>
</div>

CSS结构：

.containers {
    position: relative;
    width: 125px;
    height: 125px;
}
#top, #middle, #bottom {
    position: relative;
    width: 100%;
    border: 1px solid red;
}
#container1 {
    margin: 0 auto;
}
#container2 {
    float: left;    
}
#container3 {
    float: right;
}
#container4 {
    float: left;
}
#container5 {
    float: right;
}

---

Answer 1

这是你要找的那个：

#top, #middle, #bottom {
    position: relative;
    width: 100%;
    border: 1px solid red;
    clear:both;
}

DEMO

Answer 2

是否有理由不能将它们全部放在一个div中，然后用CSS定位它们？

    <div>
        <img id="img01" src="img1">
        <img id="img02" src="img1">
        <img id="img03" src="img1">
        <img id="img04" src="img1">
        <img id="img05" src="img1">
    </div>

然后

 div {
    position:relative;
    width:100%;
    height:100%;
 }
 div img {
    position:absolute;
 }

 #img01  { 
    top:x;
    left:y;
 } etc

作为一项规则，除非您没有其他选择，否则您不应该依赖HTML来直观样式化内容。这就是CSS的用途。