Question

我很难弄清楚如何在div容器的两侧均匀分布3 href img。

视觉示例：[X X X]

（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}

甚至空间href img在div

3 个答案: