css - 使用嵌套div的页脚

我正在尝试向我的网站添加页脚，但文字一直在移动。

<div id="footer">
  <div id="footerchild">
    <a href=".html">1</a>
  </div>
  <div id="footerchildone">
    <a href=".html">2</a>
  </div>
  <div id="footerchildtwo">
    <a href=".html">3</a>
  </div>
  <div id="footerchildthree">
    <a href=".html">4</a>
  </div>
</div>

和CSS

#footer {
  margin-left: 100px;
  background: #812;
  box-shadow: 1px 2px 40px 1px #444;
  border: 1px solid black;
  width: 1040px;
  height: 300px;
  position: absolute;
}

#footerchildone {
  float: right;
  margin-right: 500px;
  margin-top: -22px;
}

#footerchildtwo {
  float: right;
  margin-right: 350px;
  margin-top: -22px;
}

#footerchildthree {
  float:right;
  margin-top: -22px;
  margin-right: -250px;
}

我希望每列以特定的距离为中心，但是当我移动例如childthree时，第二个子项随之跟随。这不应该是因为我给了他们每个人一个单独的div。问题是什么？

最佳答案

我想你正在努力做到这一点：

http://jsfiddle.net/65GaS/5/

就这么简单，否则我误会了你。