Question

我目前正在为我正在创建的HTML电子邮件设置此布局：

我正在尝试移动文本，使其从图像的开头（基本上，向上移动文本）开始，然后在文本和红色下载按钮之间创建大约10px的间隙。

问题是我正在努力使用tables解决这个问题，这对HTML电子邮件至关重要。

这是我到目前为止所做的：

<table cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#0066cb">
    											<tbody>
    												<tr>
    													<td height="240" width="15"><!-- PADDING (CREATING AREA) --></td>
    													<td>
    														<table cellpadding="0" cellspacing="0" border="0">
    															<tbody>
    																<tr>
    																	<td height="10"><!-- PADDING --></td>
    																</tr>
    																<tr>
    																	<td>
    																		<!-- IMAGE  -->
                                                                			<img src="images/unnamed (4).png"height="250"  style="display:block;" border="0" />
    																	</td>
    																	<td style="font-family:Arial;font-size:27px;line-height:35px;color:#ffffff;">
    																		eguide title lorum ipsum <br>
    																		dolor sit amet labore et
    																		<img src="images/unnamed (5).png" alt="test"   style="display:block;" border="0" />
    																	</td>
    																</tr>
    															</tbody>
    														</table>													
    													</td>
    												</tr>
    											</tbody>
    										</table>

JSFiddle：https://jsfiddle.net/7bzgpd02/

Answer 1

在包含＆＃34; eguide＆＃34;的表格字段的内联样式中添加了此代码。文本（表格通常默认为垂直居中，直到另有指示）：

vertical-align: top;

见下面的例子，它现在有效：

＆＃13;

* {
border: 1px solid red;
}

＆＃13;

<table cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#0066cb">
    											<tbody>
    												<tr>
    													<td height="240" width="15"><!-- PADDING (CREATING AREA) --></td>
    													<td>
    														<table cellpadding="0" cellspacing="0" border="0">
    															<tbody>
    																<tr>
    																	<td height="10"><!-- PADDING --></td>
    																</tr>
    																<tr>
    																	<td>
    																		<!-- IMAGE  -->
                                                                			<img src="http://placehold.it/100x100" alt="Xenith" height="250"  style="display:block;" border="0" />
    																	</td>
    																	<td style="font-family:Arial;font-size:27px;line-height:35px;color:#ffffff; vertical-align: top;">eguide title lorum ipsum <br>
    																		dolor sit amet labore et
    																		<img src="images/unnamed (5).png" alt="test"   style="display:block;" border="0" />
    																	</td>
    																</tr>
    															</tbody>
    														</table>													
    													</td>
    												</tr>
    											</tbody>
    										</table>

＆＃13;

在HTML电子邮件中移动元素

1 个答案: