如何像在 html 中一样使两个表水平

Question

您好，我正在尝试在同一行上水平制作两个表格(一个带有图像)。我希望当屏幕变为移动设备时，左侧的表格垂直位于右侧表格的顶部。

<table style="display: inline-block" cellpadding="0" cellspacing="0"
border="0" width="100%">
<tr>
<td align="center" valign="top"
style="background-color: #ffffff; padding-bottom: 0">
<img src="#"
style=" height: auto; display: block; border: 0;">
</td>
</tr>
</table>

<table style="display: inline-block" cellpadding="0" cellspacing="0"
border="0" width="100%">
<tr>
<td align="left" valign="top"
style="background-color: #ffffff; padding-bottom: 0">
<p style="font-size: 16px; line-height:20px; color:#043667; margin:10px 0; font-family: Arial, Narrow, Helvetica, sans-serif">
<span style="color: #9d0059; font-weight: bold">text1,</span> text 2”
<br><span style="color: #9d0059"><i>-HAEGARDA Advocate</i></span>
</p>
</td>
</tr>
</table>

Answer 1

你走在正确的轨道上，但你需要摆脱width:100%，否则其中两个将无法并排在同一行中！

另外，我会使用display:inline-table而不是display:inline-block。

table {
display: inline-table;
border-spacing: 0;
border: 0;
}
th,td {
padding: 0
}

<table>
<tr>
<td align="center" valign="top" style="background-color: #ffffff; padding-bottom: 0">
<img src="#" style=" height: auto; display: block; border: 0;">
</td>
</tr>
</table>
<table>
<tr>
<td align="left" valign="top" style="background-color: #ffffff; padding-bottom: 0">
<p style="font-size: 16px; line-height:20px; color:#043667; margin:10px 0; font-family: Arial, Narrow, Helvetica, sans-serif">
<span style="color: #9d0059; font-weight: bold">text1,</span> text 2”
<br><span style="color: #9d0059"><i>-HAEGARDA Advocate</i></span>
</p>
</td>
</tr>
</table>

Answer 2

您可以使用弹性框布局来完成此操作。首先，您可以将两个表放在一个div中，并将divdisplay属性设置为flex(style="display： flex;")。这将使两个表彼此对齐。

若要使它们在移动设备或较小的设备上垂直堆叠，可以将divflex-wrap属性设置为wrap。这将导致表垂直堆叠。检查下面的代码，最重要的是div标签。

<div style="display: flex; flex-wrap: wrap;">
<table>
<tr>
<td align="center" valign="top" style="background-color: #ffffff; padding-bottom: 0">
<img src="#" style=" height: auto; display: block; border: 0;">
</td>
</tr>
</table>
<table>
<tr>
<td align="left" valign="top" style="background-color: #ffffff; padding-bottom: 0">
<p style="font-size: 16px; line-height:20px; color:#043667; margin:10px 0; font-family: Arial, Narrow, Helvetica, sans-serif">
<span style="color: #9d0059; font-weight: bold">text1,</span> text 2”
<br><span style="color: #9d0059"><i>-HAEGARDA Advocate</i></span>
</p>
</td>
</tr>
</table>
</div>