css - div中的均匀空间href img

Question

我很难弄清楚如何在 div 容器的两侧均匀地放置 3 个 href img。

视觉示例：[XXX]

(X = href img [ ]=容器 div)

<div id="container">
  <a href="#"><img src="image1.jpg"></a>
  <a href="#"><img src="image2.jpg"></a>
  <a href="#"><img src="image3.jpg"></a>
</div>

CSS：

#container {
  clear: both;
  width: 900px;
  height: 150px;
}
#container a img {
  margin: 0 auto;
}

任何帮助深表感谢。谢谢

Answer 1

好的，因为您希望它们均匀分布，我建议使用百分比作为图像的宽度。例如：

#container {
  clear: both;
  width: 900px;
  height: 150px;
}
#container a img {
  float: left;
  width: 33%;
}

这应该使您的锚点在父 div 中浮动，以便它们水平对齐

Answer 2

这是一个示例 - jsFiddle。在 Chrome 21、IE9、FF13、Safari 5、Opera 11 中测试。

#container {
  clear: both;
  width: 900px;
  height: 150px;
}
#container a {
  float: left;
  display: block;
  width: 300px;
  text-align: center;
}
#container a img {
  margin: 0 auto;
}

Answer 3

尝试这个

#container a {float:left; padding:0 10px}