HTML表中重疊的圖像

-1

有人可以解釋爲什麼圖像重疊？HTML表中重疊的圖像

<table width="100%" border="0" cellpadding="5"> 
<tr> 
    <td width="20%"><div class="smallfont"><a href="link1"><b>Nymphomaniac: Vol. II<br></br>(2013)</b></a></div> 
    <div style="position:relative; left:0; top:0;"> 
    <img src="http://static.rogerebert.com/uploads/movie/movie_poster/nymphomaniac-vol-i-2014/large_3lVe9Os8FjpX1VgtdT9VFnbqs5f.jpg" style="z-index:1; position:absolute; left:10px; top:0;" width="150" height="230"/> 
    <img src="http://s2.postimg.org/wl6fn18ft/moldura.png" style="z-index:2;position:absolute; left:0; top:0;"/> 
    <img src="http://s27.postimg.org/njcn0o0vn/player.png" style="z-index:3;position:absolute; left:0; top:0; opacity: 0;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0;this.filters.alpha.opacity=0"/> 
    </div> 
    </td> 
</tr> 
<tr> 
    <td width="20%"><div class="smallfont"><a href="link2"><b>Nymphomaniac: Vol. II<br></br>(2013)</b></a></div> 
    <div style="position:relative; left:0; top:0;"> 
    <img src="http://static.rogerebert.com/uploads/movie/movie_poster/nymphomaniac-vol-i-2014/large_3lVe9Os8FjpX1VgtdT9VFnbqs5f.jpg" style="z-index:1; position:absolute; left:10px; top:0;" width="150" height="230"/> 
    <img src="http://s2.postimg.org/wl6fn18ft/moldura.png" style="z-index:2;position:absolute; left:0; top:0;"/> 
    <img src="http://s27.postimg.org/njcn0o0vn/player.png" style="z-index:3;position:absolute; left:0; top:0; opacity: 0;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0;this.filters.alpha.opacity=0"/> 
    </div> 
</tr> 
</table>

示例圖像：

來源

2015-09-02 Jorge Pereira

你想輸出是什麼？ – Gacci

的問題是，它包含<img>標籤<div>標籤沒有寬度和高度屬性同時<img>有寬度和高度。所以如果你旁邊添加CSS代碼：

<style> 
    div.photodiv{ 
     width: 150px; 
     height: 230px; 
    } 
</style>

，然後你要添加含有<img>裏面class="photodiv"到<div>元素。這裏是所有的代碼：

<!doctype html> 
<html> 
<body> 
<style> 
    div.photodiv{ 
     width: 150px; 
     height: 230px; 


    } 
</style> 
<table width="100%" border="0" cellpadding="5"> 
    <tr> 
     <td width="20%"> 
      <div class="smallfont"><a href="link1"><b>Nymphomaniac: Vol. II<br></br>(2013)</b></a></div> 
      <div class="photodiv" style="position:relative; left:0; top:0;"> 
       <img src="http://static.rogerebert.com/uploads/movie/movie_poster/nymphomaniac-vol-i-2014/large_3lVe9Os8FjpX1VgtdT9VFnbqs5f.jpg" style="z-index:1; position:absolute; left:10px; top:0;" width="150" height="230"/> 
       <img src="http://s2.postimg.org/wl6fn18ft/moldura.png" style="z-index:2;position:absolute; left:0; top:0;"/> 
       <img src="http://s27.postimg.org/njcn0o0vn/player.png" style="z-index:3;position:absolute; left:0; top:0; opacity: 0;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0;this.filters.alpha.opacity=0"/> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td width="20%"> 
      <div class="smallfont"><a href="link2"><b>Nymphomaniac: Vol. II<br></br>(2013)</b></a></div> 
      <div class="photodiv" style="position:relative; left:0; top:0;"> 
       <img src="http://static.rogerebert.com/uploads/movie/movie_poster/nymphomaniac-vol-i-2014/large_3lVe9Os8FjpX1VgtdT9VFnbqs5f.jpg" style="z-index:1; position:absolute; left:10px; top:0;" width="150" height="230"/> 
       <img src="http://s2.postimg.org/wl6fn18ft/moldura.png" style="z-index:2;position:absolute; left:0; top:0;"/> 
       <img src="http://s27.postimg.org/njcn0o0vn/player.png" style="z-index:3;position:absolute; left:0; top:0; opacity: 0;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0;this.filters.alpha.opacity=0"/> 
      </div> 
     </td> 
    </tr> 
</table> 
</body> 
</html>

來源

2015-09-03 01:19:59 zecoder

謝謝，工作得很好;） –

你將需要一些CSS添加到代碼，以便添加

<style> 
    #poster{ 
     padding-bottom:230px; 
    } 
</style>

然後你要添加id="poster"到第一<div class="smallfont">，使之成爲<div class="small font" id="poster">

來源

2015-09-02 23:47:40

HTML表中重疊的圖像

回答

相關問題