电子邮件 HTML Blast - 图片未排成一行的表格?

Posted

技术标签:

【中文标题】电子邮件 HTML Blast - 图片未排成一行的表格?【英文标题】:Email HTML Blast - table with images not lining up in row? 【发布时间】:2018-12-27 22:53:21 【问题描述】:

这是我的sn-p代码:

    <table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff"  class="email-container">
        <tr>
            <td><a href="https://www.facebook.com/classicstagecompany"><img src="http://classicstage.org/wp-content/uploads/2018/07/Social-Facebook.jpg"    style="display:block"/></a></td>  
            <td><a href="https://twitter.com/classicstage"><img src="http://classicstage.org/wp-content/uploads/2018/07/Social-Twitter.jpg"    style="display:block"/></a></td>   
            <td><a href="https://www.instagram.com/classicstage/"><img src="http://classicstage.org/wp-content/uploads/2018/07/Social-Insta.jpg"    style="display:block"/></a></td> 
        </tr>
        <tr>
            <td><a href="http://www.classicstage.org"><img src="http://classicstage.org/wp-content/uploads/2018/07/footer.jpg"     style="display:block"/></a>
            </td>   
        </tr>
    </table>

为什么在 Dreamweaver 中看起来像这样:

但在 Gmail 中是这样的:

【问题讨论】:

【参考方案1】:

在一个表中,每个表都应该有相同的行数,或者 colspan 可用于跨多个列跨越一个表。不建议使用 colspan,因为不同的电子邮件客户端开始出现问题。

表格列内的表格

<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff"  class="email-container">
        <tr>
            <td>
			
				<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff"  class="email-container">
					<tr>
						<td><a href="https://www.facebook.com/classicstagecompany"><img src="http://classicstage.org/wp-content/uploads/2018/07/Social-Facebook.jpg"    style="display:block"/></a></td>  
						<td><a href="https://twitter.com/classicstage"><img src="http://classicstage.org/wp-content/uploads/2018/07/Social-Twitter.jpg"    style="display:block"/></a></td>   
						<td><a href="https://www.instagram.com/classicstage/"><img src="http://classicstage.org/wp-content/uploads/2018/07/Social-Insta.jpg"    style="display:block"/></a></td> 
					</tr>
				</table>
			
			</td> 
        </tr>
        <tr>
            <td><a href="http://www.classicstage.org"><img src="http://classicstage.org/wp-content/uploads/2018/07/footer.jpg"     style="display:block"/></a>
            </td>   
        </tr>
    </table>

colspan 方法(让您了解它的工作原理)

<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff"  class="email-container">
        <tr>
            <td><a href="https://www.facebook.com/classicstagecompany"><img src="http://classicstage.org/wp-content/uploads/2018/07/Social-Facebook.jpg"    style="display:block"/></a></td>  
            <td><a href="https://twitter.com/classicstage"><img src="http://classicstage.org/wp-content/uploads/2018/07/Social-Twitter.jpg"    style="display:block"/></a></td>   
            <td><a href="https://www.instagram.com/classicstage/"><img src="http://classicstage.org/wp-content/uploads/2018/07/Social-Insta.jpg"    style="display:block"/></a></td> 
        </tr>
        <tr>
            <td colspan="3"><a href="http://www.classicstage.org"><img src="http://classicstage.org/wp-content/uploads/2018/07/footer.jpg"     style="display:block"/></a>
            </td>   
        </tr>
    </table>

尝试第一个(它会起作用)。

干杯

【讨论】:

以上是关于电子邮件 HTML Blast - 图片未排成一行的表格?的主要内容,如果未能解决你的问题,请参考以下文章

html网页中图片横向滚动

当博客标题长度不同时,如何使用flexbox将元素排成一行

如何安装BLAST+

10在线blast比对结果解析

本地Blast代码

并排对齐图像上传预览