英文:
Why does the first image in this table only link part of the image to its hyperlink, but the second one works fine?
问题
I'm unsure why the link for the first image in the table is messed up since it has the same structure as the second image which does work fine, it's just in a different location. I've copied the relevant sections of html below as block code.
我不确定为什么表格中第一张图片的链接出了问题，因为它的结构与第二张图片相同，而第二张图片却正常工作，只是位置不同。我已将相关的HTML部分复制如下，作为代码块：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#webpage {
width: 1000px ;
margin-left: auto ;
margin-right: auto ;
}
/* Pennant pos */
.pennant {
padding: 0px 0px;
position: absolute;
}
/* Logo pos */
.logo {
padding: 300px 0px;
position: absolute;
}
<!-- language: lang-html -->
<body style="color:white">
<div id="webpage">
<hr id="home">
<br>
<table width="100%" border="0">
<tbody>
<tr>
<td valign="Top" align="Left">
<div class="pennant">
<a href="https://link1.com/">
<img src="pennant.png" width="350" height="226">
</a>
</div>
</td>
</tr>
<tr>
<td valign="Bottom" align="Left">
<div class="logo">
<a href="https://link2.com/">
<img src="logo.png" width="257" height="95">
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
<!-- end snippet -->
我是您的中文翻译，只提供翻译，不包含其他内容。
英文:
I'm unsure why the link for the first image in the table is messed up since it has the same structure as the second image which does work fine, it's just in a different location. I've copied the relevant sections of html below as block code
I'm new to html but have been able to make everything else work fine. Any help would be appreciated!
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#webpage {
width: 1000px ;
margin-left: auto ;
margin-right: auto ;
}
/* Pennant pos */
.pennant {
padding: 0px 0px;
position: absolute;
}
/* Logo pos */
.logo {
padding: 300px 0px;
position: absolute;
}
<!-- language: lang-html -->
<body style="color:white">
<div id="webpage">
<hr id="home">
<br>
<table width="100%" border="0">
<tbody>
<tr>
<td valign="Top" align="Left">
<div class="pennant">
<a href="https://link1.com/">
<img src="pennant.png" width="350" height="226">
</a>
</div>
</td>
</tr>
<tr>
<td valign="Bottom" align="Left">
<div class="logo">
<a href="https://link2.com/">
<img src="logo.png" width="257" height="95">
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
<!-- end snippet -->
答案1
得分: 1
".pennant { padding: 0px 0px; }" 应该是：".pennant { padding: 0px 0px; }"
英文:
I am not sure but position of .pennant cannot be absolute, it moves the div into the other place than your image is, try removing it.
.pennant {
padding: 0px 0px;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论