HTML table 中的重叠图像

Question

有人可以解释为什么图像重叠吗？

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

示例图片：

Answer 1

您将需要向代码中添加一些 css，因此请添加

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

然后您要将 id="poster" 添加到第一个 <div class="smallfont">，使其成为 <div class="small font" id="poster">

Answer 2

问题是包含 <img> 标签的 <div> 标签没有 width 和 height属性同时 <img> 有 width 和 height。所以如果你添加下一个 css 代码：

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

然后您将添加 class="photodiv" 到 <div> 元素，其中包含 <img>。这是所有代码：

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

HTML table 中的重叠图像

Overlapping images in HTML table

html

css

html-table

overlap