Question

在我正在处理的网站上（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中看到任何会导致这种情况的内容。

Answer 1

我尝试使用您的代码尽力而为，以下内容适合您：

<div class="container" style="overflow:hidden; text-align:center;">
<div style="display:inline-block; margin: 0px 80px;">
    <div class="overlay">
        <img class="img1" height="225" src="NYC/wtc1.JPG" width="225">
    </div>
</div>

<div style="display:inline-block; margin: 0px 80px;">
    <div class="overlay">
        <img class="img2" height="225" src="NYC/wtcmem.jpg" width="225">
    </div>
</div>

<div style="display:inline-block; margin: 0px 80px;">
    <div class="overlay">
        <img class="img3" height="225" src="NYC/sky.jpg" width="225">
    </div>
</div>
</div>

请注意，<overlay>不是有效的HTML元素。我也在页面上看到过你使用<margin>之类的内容。发明HTML元素并不是一个好习惯。您可以使用常规<div>获得所需的所有功能（虽然我不认为这会破坏您的页面......可能只在旧浏览器中...）。

我基本上做了什么：

用<div>的容器包裹三个text-align:center s。这将使其内部的三个div与中心对齐。
添加了display:inline-block;以使所有div都遵循text-align。
为div添加了边距以使其间隔

请注意，我强烈建议将您的<overlay>替换为<div class="overlay">

Answer 2

如果你有这样的标记：

<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%;。

Answer 3

div标签自然垂直堆叠。因此，您需要为每个div添加一个ID，或者您可以将所有img放在一个div中。

block css属性正在影响布局。它将下一个img推到下一行。

带有img的HTML div显示奇怪

3 个答案: