电子邮件布局 - 从右到左
我一直试图弄清楚如何让副本端和图像端切换位置。我使用https://templates.mailchimp.com/development/responsive-email/layout-manipulation/作为参考，我得到了这个概念，我无法实现它。
<body>
<div class="container">
<table cellpadding="0" cellspacing="15" align="center" border="0" class="container">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%">
<tr>
<td width="40%" valign="center" align="center" class="mobile2" bgcolor="#707249">
<table cellpadding="0" cellspacing="20" align="center" border="0" width="100%">
<tr>
<td align="center"><img src="http://www.leejofa.com/emails/images/baker-logo.png" max-width="200px" /></td>
</tr>
<tr>
<td align="center"><span style="font:normal 125% 'Gill Sans', 'Gill Sans MT', Verdana, Arial, sans-serif; color:#FFFFFF">Larkhill</td>
</tr>
<tr class="desktop">
<td class="desktop"> </td>
</tr>
<tr>
<td align="center"><a href="http://search.leejofa.com/itembrowser.aspx?action=attributes&ItemType=WallCovering&resetCrumbs=true&Brand=G%20P%20%26%20J%20Baker&WallCovering%20Collection=Larkhill&offset=0?utm_source=viewcollection&utm_medium=email&utm_content=textlink&utm_campaign=Farrow-Ball-Exit-March-2017" style="font:normal 100% 'Gill Sans', 'Gill Sans MT', Verdana, Arial, sans-serif; color:#FFFFFF">SEARCH COLLECTION <strong style="font:normal 75% Arial, sans-serif">►</strong></a></td>
</tr>
</table>
</td>
<td width="60%" class="mobile2"><a href="http://search.leejofa.com/itembrowser.aspx?action=attributes&ItemType=WallCovering&resetCrumbs=true&Brand=G%20P%20%26%20J%20Baker&WallCovering%20Collection=Larkhill&offset=0?utm_source=viewcollection&utm_medium=email&utm_content=imagelink&utm_campaign=Farrow-Ball-Exit-March-2017"><img src="http://www.leejofa.com/emails/images/larkhill.jpg" alt="Furness Weaves" /></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%">
<tr>
<td width="60%" class="mobile2"><a href="http://search.leejofa.com/itembrowser.aspx?action=attributes&ItemType=WallCovering&resetCrumbs=true&Brand=Baker%20Lifestyles&Collection=Denbury&offset=0?utm_source=viewcollection&utm_medium=email&utm_content=textlink&utm_campaign=Farrow-Ball-Exit-March-2017"><img src="http://www.leejofa.com/emails/images/denbury.jpg" alt="Furness Weaves" /></a></td>
<td width="40%" valign="center" align="center" class="mobile2" bgcolor="#007DB1">
<table cellpadding="0" cellspacing="20" align="center" border="0" width="100%">
<tr>
<td align="center"><img src="http://www.leejofa.com/emails/images/lifestyle-logo.png" max-width="200px" /></td>
</tr>
<tr>
<td align="center"><span style="font:normal 125% 'Gill Sans', 'Gill Sans MT', Verdana, Arial, sans-serif; color:#FFFFFF">Denbury</td>
</tr>
<tr class="desktop">
<td class="desktop"> </td>
</tr>
<tr>
<td align="center"><a href="http://search.leejofa.com/itembrowser.aspx?action=attributes&ItemType=WallCovering&resetCrumbs=true&Brand=Baker%20Lifestyles&Collection=Denbury&offset=0?utm_source=viewcollection&utm_medium=email&utm_content=textlink&utm_campaign=Farrow-Ball-Exit-March-2017" style="font:normal 100% 'Gill Sans', 'Gill Sans MT', Verdana, Arial, sans-serif; color:#FFFFFF">SEARCH COLLECTION <strong style="font:normal 75% Arial, sans-serif">►</strong></a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
1 个答案:
答案 0 :(得分：1)
您可以在样式标记中使用方向：
style="direction:rtl" and style="direction:rtl"
我带了你的代码和 1.删除最后一行（将其作为单独的表格放置） 2.为表格添加了方向样式 3.添加了媒体查询，以便您进行测试
＆＃13;
＆＃13;
＆＃13;
＆＃13;
@media only screen and (max-width : 480px) {
table[class].Colms td{display:inline-block; width:100%;}
}<div class="container">
<table cellpadding="0" cellspacing="15" align="center" border="0" class="container">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%" style="direction: rtl;" class="Colms">
<tr>
<td width="60%" class="mobile2" style="direction:ltr"><a href="http://search.leejofa.com/itembrowser.aspx?action=attributes&ItemType=WallCovering&resetCrumbs=true&Brand=G%20P%20%26%20J%20Baker&WallCovering%20Collection=Larkhill&offset=0?utm_source=viewcollection&utm_medium=email&utm_content=imagelink&utm_campaign=Farrow-Ball-Exit-March-2017"><img src="http://www.leejofa.com/emails/images/larkhill.jpg" alt="Furness Weaves" /></a></td>
<td width="40%" valign="center" align="center" class="mobile2" bgcolor="#707249" style="direction:ltr">
<table cellpadding="0" cellspacing="20" align="center" border="0" width="100%">
<tr>
<td align="center"><img src="http://www.leejofa.com/emails/images/baker-logo.png" max-width="200px" /></td>
</tr>
<tr>
<td align="center"><span style="font:normal 125% 'Gill Sans', 'Gill Sans MT', Verdana, Arial, sans-serif; color:#FFFFFF">Larkhill</td>
</tr>
<tr class="desktop">
<td class="desktop"> </td>
</tr>
<tr>
<td align="center"><a href="http://search.leejofa.com/itembrowser.aspx?action=attributes&ItemType=WallCovering&resetCrumbs=true&Brand=G%20P%20%26%20J%20Baker&WallCovering%20Collection=Larkhill&offset=0?utm_source=viewcollection&utm_medium=email&utm_content=textlink&utm_campaign=Farrow-Ball-Exit-March-2017" style="font:normal 100% 'Gill Sans', 'Gill Sans MT', Verdana, Arial, sans-serif; color:#FFFFFF">SEARCH COLLECTION <strong style="font:normal 75% Arial, sans-serif">►</strong></a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
方向适用于文字：ltr（从左到右）和rlt（从右到左）。该表具有rtl，并且每个td都具有ltr。您可以运行上面的代码段，全屏显示并查看它是否有效。
干杯
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？