我有一個包含兩個 <td's> 的表格，它們設定為固定寬度，但它們似乎會根據 Outlook 上的內容而改變......
如果我在每個 <td'> 中放置一個測驗影像，它們會很好地對齊并且寬度相等，如果我在每個中放置文本，它們也是相同的，但是如果我將影像放在一個中，文本放在另一個中，則影像會增大，而文本會縮小盡管影像是固定大小以適合其容器。
這只發生在前景上，其他一切看起來都很好：
這是一個鏈接到石蕊查看問題：
https://litmus.com/checklist/emails/public/ef3ee40#ol2007
下面是三個例子的代碼，它們的結構相同，只是內容不同：
<img'> <img'>
<img'> <文本'>
<文本'> <文本'>。
<!--Section content starts here-->
<table align="left" valign="middle" width="660" border="0" cellspacing="0" cellpadding="0" class="col-12" >
<tr>
<td align="center" valign="middle" width="660" class="col-12">
<table width="660" border="0" cellspacing="0" cellpadding="0" align="center" style="table-layout: fixed;" class="col-12">
<!--Two columns-->
<tr>
<td align="center" valign="middle" style="padding: 20px;border:1px solid black" width="290" class="col-12 mobile-padding-vertical mobile-padding-horizontal">
<img class="img-12" width="290" border="0" src="https://via.placeholder.com/290x290" style="display:block;border:none;width:100%;max-width:290px" />
</td>
<td align="center" valign="middle" style="padding: 20px;border:1px solid black" width="290" class="col-12 mobile-padding-vertical mobile-padding-horizontal">
<img class="img-12" width="290" border="0" src="https://via.placeholder.com/290x290" style="display:block;border:none;width:100%;max-width:290px" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="middle" width="660" class="col-12">
<table width="660" border="0" cellspacing="0" cellpadding="0" align="center" style="table-layout: fixed;" class="col-12">
<!--Two columns-->
<tr>
<!--Left image section-->
<td align="center" valign="middle" style="padding: 20px;border:1px solid black" width="290" class="col-12 mobile-padding-vertical mobile-padding-horizontal">
<img class="img-12" width="290" height="290" border="0" src="https://via.placeholder.com/290x290" style="display:block;border:none;width:100%;max-width:290px" />
</td>
<td align="left" valign="middle" style="padding: 20px;border:1px solid black" width="290" class="col-12 mobile-padding-vertical mobile-padding-horizontal">
<p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;display:block;width:290px">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;">Take a look <a href="https://skyacomms.grouptreehosting.net/tracker.axd?t=620cced4b420f1b17e8f2d3e&u=https://www.skyacademystudios.com/" style="color:#eeabff;text-decoration: underline;font-weight:600;">here</a></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="middle" width="660" class="col-12">
<table width="660" border="0" cellspacing="0" cellpadding="0" align="center" style="table-layout: fixed;" class="col-12">
<!--Two columns-->
<tr>
<td align="left" valign="middle" style="padding: 20px;border:1px solid black" width="290" class="col-12 mobile-padding-vertical mobile-padding-horizontal">
<p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;display:block;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;">Take a look <a href="https://skyacomms.grouptreehosting.net/tracker.axd?t=620cced4b420f1b17e8f2d3e&u=https://www.skyacademystudios.com/" style="color:#eeabff;text-decoration: underline;font-weight:600;">here</a></p>
</td>
<td align="left" valign="middle" style="padding: 20px;border:1px solid black" width="290" class="col-12 mobile-padding-vertical mobile-padding-horizontal">
<p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;display:block;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;">Take a look <a href="https://skyacomms.grouptreehosting.net/tracker.axd?t=620cced4b420f1b17e8f2d3e&u=https://www.skyacademystudios.com/" style="color:#eeabff;text-decoration: underline;font-weight:600;">here</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
感謝您提供的任何幫助。
uj5u.com熱心網友回復：
如果您使用百分比，那將適用于 Outlook（以及其他所有內容）。我還去掉了<p>(290px) 的寬度，因為寬度已經在其中設定了<td>，這可能會使沒有那么多可用空間的手機上的某些東西混淆。
<tr>
<td align="center" valign="middle" width="660" class="col-12">
<table width="660" border="0" cellspacing="0" cellpadding="0" align="center" style="table-layout: fixed;" class="col-12">
<!--Two columns-->
<tr>
<!--Left image section-->
<td align="center" valign="middle" style="padding: 20px;border:1px solid black" width="50%" class="col-12 mobile-padding-vertical mobile-padding-horizontal">
<img class="img-12" width="290" border="0" src="https://via.placeholder.com/290x290" style="display:block;border:none;width:100%;max-width:290px" />
</td>
<td align="left" valign="middle" style="padding: 20px;border:1px solid black" width="50%" class="col-12 mobile-padding-vertical mobile-padding-horizontal">
<p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;display:block;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p style="font-size: 14px;line-height: 20px;color:#222323;font-family: Arial, sans-serif;margin-top:0px;margin-bottom:15px;">Take a look <a href="https://skyacomms.grouptreehosting.net/tracker.axd?t=620cced4b420f1b17e8f2d3e&u=https://www.skyacademystudios.com/" style="color:#eeabff;text-decoration: underline;font-weight:600;">here</a></p>
</td>
</tr>
</table>
</td>
</tr>
順便說一句，對于移動設備中的回應式影像，您需要洗掉 height 屬性 ( height="290") 或添加style="...height:auto;". 否則即使在手機上高度也會保持不變并且會變形。
我確實在那里使用了 width="290" ，但這不適用于手機。50% 意味著移動設備是回應式的，因為它們的列只有大約 150 像素（移動設備的經驗法則是大約 300 像素寬）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/441463.html