HTML div與img在它顯示奇怪

在我正在工作的網站（this），我有一個IMG的div。這是htmlHTML div與img在它顯示奇怪

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

來源

2013-07-13 Chris Loonam

什麼是''？ – robertc

'overlay'是一個CSS元素，當它懸停時變成半透明的白色。 –

什麼是CSS元素？ –

取代你<overlay>如果你有一些類似這樣的標記：

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

來源

2013-07-13 01:22:52 robertc

謝謝，這個工作很完美。 –

div標籤自然垂直堆疊。因此，您需要爲每個div添加一個ID，或者您可以將所有img放入一個div。

block css屬性影響佈局。它正在推動下一行img。

來源

2013-07-13 00:59:56

有一個'id'對佈局有什麼不同？ – robertc

如果你爲每個div應用'id'，那麼你可以直接在CSS中引用它們。允許您控制'div'的位置和佈局，而不是'img'標籤。 –

你可以直接引用它們而不用'id'，這就是'：nth-child（）'這樣的事情。 – robertc

我試圖做你的代碼盡我所能，下面就爲你工作：

<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獲得所需的所有功能（儘管我不認爲這會破壞您的頁面，可能只有在舊版本的瀏覽器中）。

我基本上做的：

與text-align:center的容器包裹三<div>秒。這將使其內部的三個div對齊中心。
添加display:inline-block;使所有的div遵循文本對齊。
增加利潤率的div空間他們

注意，我強烈建議與類似<div class="overlay">

來源

2013-07-13 01:06:10

這解決了這個問題，但我怎麼能中心第二個div？ –

我在我的答案中編輯了代碼。再試一次 –

HTML div與img在它顯示奇怪

回答

相關問題