css - 带有img的HTML div显示异常

在我正在使用的网站（this）上，我有一个带有img的div。这是HTML

<div><overlay> <img class="img1" height="225" src="NYC/wtc1.JPG" width="225" /></overlay</div>

<div><overlay> <img class="img2" height="225" src="NYC/wtcmem.jpg" width="225" /></overlay></div>

<div><overlay> <img class="img3" height="225" src="NYC/sky.jpg" width="225" /></overlay></div>
<p>&nbsp;</p>

没有什么太复杂的。这是img1，img2和img3类的CSS。

.img1
{
position:absolute;
left:12%;
}
.img2
{
display:block;
margin:auto;
}
.img3
{
position:absolute;
right:12%;
}

也很简单。但是，如果您查看该网站，则第三个图像（至少对我来说是Safari上的）比其他两个图像要低得多。为什么会这样？我没有在CSS或HTML中看到任何会导致这种情况的信息。

最佳答案

如果您有这样的标记：

<div class="wrapper">
    <div><img class="img1" height="225" src="http://rwzimage.com/albums/NYC/wtc1.JPG" width="225" /></div>
    <div><img class="img2" height="225" src="http://rwzimage.com/albums/NYC/wtcmem.jpg" width="225" /></div>
    <div><img class="img3" height="225" src="http://rwzimage.com/albums/NYC/sky.jpg" width="225" /></div>
</div>

然后，我认为此CSS将大致具有您所追求的效果：

.wrapper {
    display: table;
    width: 960px;
}

.wrapper > div {
    display: table-cell;
    width: 33%;
    text-align: center;
}

.wrapper > div:hover img {
    opacity: 0.5;
}

Demo。我设置了width: 960px;，以使它强制比JSFiddle窗口宽，但是您可以为页面设置width: 100%;。

关于css - 带有img的HTML div显示异常，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17625960/