Html 用于更改图像位置的 CSS 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17992246/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Css property to change image position
提问by Java Student
I am doing html email templateand in footer table what I am required to do is, book image is bit popped out of <td>see the left image that is what I am required to do and what I have is on right
我正在做html 电子邮件模板，在页脚表中，我需要做的是，书籍图像有点弹出，<td>看到左边的图像是我需要做的，而我所拥有的在右边
So please guide me how I can do it.
所以请指导我如何做到这一点。
<tr style=" background-color:#2582bb;">
<td width="113" height="214" valign="top">
<img src="images/footer.png" width="113" height="161"/>
</td>
</tr>
回答by Nitesh
Add a divwith relativepositioning and make your imgto have an absoluteposition. Adjust the top or bottom parameters and get the desired output.
添加一个divwithrelative定位，让你img有一个absolute位置。调整顶部或底部参数并获得所需的输出。
Here is the solution.
这是解决方案。
The Code:
编码：
<td width="113" height="214" valign="top">
<div style="position:relative;">
<img style="position:absolute; top:xx px; bottom: xx px" src="images/footer.png" width="113" height="161"/>
</div>
</td>
PS:Either use top or bottom. xx is a dummy value, insert pixel values to get what you want.
PS：使用顶部或底部。xx 是一个虚拟值，插入像素值以获得您想要的值。
回答by John
The other answer works for web, but is incorrect for html email - position is not supported in many email clients including Gmail, Yahoo, Outlook 07, 10 & 13, Lotus Notes 6 & 7, Android 2.3 Gmail and Windows Mobile 7. Refer to the CSS Support Guide from Campaign Monitor- download the Complete Guide PDF for the full support breakdown.
另一个答案适用于网络，但不适用于 html 电子邮件 - 许多电子邮件客户端不支持位置，包括 Gmail、Yahoo、Outlook 07、10 和 13、Lotus Notes 6 和 7、Android 2.3 Gmail 和 Windows Mobile 7。请参阅来自 Campaign Monitor的CSS 支持指南- 下载完整指南 PDF 以获得完整的支持细分。
There are only 2 ways to do this in html email:
在 html 电子邮件中只有两种方法可以做到这一点：
- Cut your image into two and have the protruding top image/part in the above table row
- If you want to keep it as one full image, you must use a rowspan (or colspan for horizontally protruding)
- 将您的图像一分为二，并在上表行中突出顶部图像/部分
- 如果要将其保留为一张完整图像，则必须使用 rowspan（或 colspan 用于水平突出）
Here is a rowspan example:
这是一个 rowspan 示例：
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100" height="100" bgcolor="#F5F5F5">
</td>
<td width="400" rowspan="2" bgcolor="#252525">
<img style="margin: 0; border: 0; padding: 0; display: block;" src="" width="400" height="300" alt="">
</td>
<td width="100" height="100" bgcolor="#F5F5F5">
</td>
</tr>
<tr>
<td width="100" height="200" bgcolor="#959595">
</td>
<td width="100" height="200" bgcolor="#959595">
</td>
</tr>
</table>
