0

在我正在处理的网站上（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的img2CSS img3。

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

也很简单。但是，如果你看一下网站，第三张图片（至少对我来说是在 Safari 上）比其他两张要低得多。为什么会发生这种情况？我在 CSS 或 HTML 中看不到任何会导致此问题的内容。

4

3 回答 3

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>s 获得所需的所有功能（尽管我认为这不会破坏您的页面.. 可能只在旧浏览器中..）。

我基本上做了什么：

  1. <div>用一个容器将三个 s 包裹起来text-align:center。这将使其中的三个 div 与中心对齐。
  2. 添加display:inline-block;以使所有 div 遵循文本对齐。
  3. 为 div 添加边距以分隔它们

请注意，我强烈建议<overlay>您用类似的东西替换您的<div class="overlay">

于 2013-07-13T01:06:10.630 回答
1

如果你有这样的标记：

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

演示。我设置width: 960px;了它会迫使事情比 JSFiddle 窗口更宽，但你可以width: 100%;为你的页面设置。

于 2013-07-13T01:22:52.710 回答
0

div标签自然垂直堆叠。所以你需要为每个添加一个 iddiv或者你可以把所有的都img放在一个中div。

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

于 2013-07-13T00:59:56.853 回答