【发布时间】：2019-01-16 19:44:50
【问题描述】：
我正在为自己设计一个新的电子邮件设计，并且我已经让它适用于除 Android 之外的所有设备。在 Android 上查看时，这两列的宽度不一致。
/* Some resets and issue fixes */
#outlook a { padding:0; }
body{ width:100% !important; margin:0; padding:0; }
.ReadMsgBody { width: 100%; }
.ExternalClass {width:100%;}
.backgroundTable {margin:0 auto; padding:0; width:100%;!important;}
table td {border-collapse: collapse;}
.ExternalClass * {line-height: 115%;}
div[style*=margin: 16px 0;]{
margin:0 !important;
}
@media screen and (max-width: 630px){
*[class="100p"] {width:100% !important; height:auto !important;}
*[class="condensed"] {padding-bottom:20px !important; display: block; width:100% !important; text-align: center !important;}
*[class="center"] {text-align:center !important; width:100% !important; height:auto !important;}
*[class="100padleftright"] {width:100% !important; padding:0 20px 0 20px;}
*[class="100padtopbottom"] {width:100% !important; padding:20px 0px 20px 0px;}
}
<table><tr>
<td align="center" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" class="100padtopbottom" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;background-color: #F4F4F4;border-top: 1px solid #FFFFFF;border-bottom: 1px solid #CCCCCC;border-collapse: collapse !important;" width="100%">
<tbody>
<tr>
<td align="center" class="condensed" style="padding-top: 20px;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;width: 260px;" valign="top">
<table border="0" cellpadding="20" cellspacing="0" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse !important;" width="100%">
<tbody>
<tr>
<td class="100padleftright" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;color: #505050;font-family: Helvetica;font-size: 14px;line-height: 150%;padding-top: 0;padding-right: 20px;padding-bottom: 20px;padding-left: 20px;text-align: center;"><img align="center" class="columnImage" src="https://www.skirball.org/sites/default/files/styles/content_desktop/public/social_good_salon_hotel_usa.jpg?itok=uKMG5iih&timestamp=1500073852" style="width:100%;max-width: 260px;-ms-interpolation-mode: bicubic;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;display: inline;" width="260"></td>
</tr>
<tr>
<td class="100padleftright" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;color: #505050;font-family: Helvetica;font-size: 14px;line-height: 150%;padding-top: 0;padding-right: 20px;padding-bottom: 20px;padding-left: 20px;text-align: left;" valign="top">
<h3 style="display: block;font-family: Helvetica;font-size: 16px;font-style: italic;font-weight: normal;line-height: 100%;letter-spacing: normal;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: left;color: #606060 !important;">Social Good Salon</h3>
The Skirball’s Social Good Salons are regular gatherings where people of all backgrounds and ages are welcome to learn about current events and socially relevant topics and then exchange ideas and opinions. At this salon, begin by watching the New York Times Op-Doc Hotel U.S.A. (2017)—Andrea Meller and Marissa Pearl’s short about the exciting and bewildering experience of a refugee’s very first night in the United States. After the screenings, participate in a facilitated small group discussion of the film’s themes, while enjoying complimentary coffee, tea, and cookies.<br>
<a href="https://www.skirball.org/programs/words-and-ideas/social-good-salon" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #EB4102;font-weight: normal;text-decoration: underline;" target="_blank">See more details here!</a></td>
</tr>
</tbody>
</table>
</td>
<td align="center" class="condensed" style="padding-top: 20px;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;width: 260px;" valign="top">
<table border="0" cellpadding="20" cellspacing="0" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;border-collapse: collapse !important;" width="100%">
<tbody>
<tr>
<td class="100padleftright" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;color: #505050;font-family: Helvetica;font-size: 14px;line-height: 150%;padding-top: 0;padding-right: 20px;padding-bottom: 20px;padding-left: 20px;text-align: center;"><img class="columnImage" src="https://www.skirball.org/sites/default/files/styles/content_desktop/public/17.8-pst-free-days.jpg?itok=72B9pnSU&timestamp=1504731793" style="width:100%; max-width: 260px;-ms-interpolation-mode: bicubic;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;display: inline;" width="260"></td>
</tr>
<tr>
<td class="100padleftright" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;color: #505050;font-family: Helvetica;font-size: 14px;line-height: 150%;padding-top: 0;padding-right: 20px;padding-bottom: 20px;padding-left: 20px;text-align: left;" valign="top">
<h3 style="display: block;font-family: Helvetica;font-size: 16px;font-style: italic;font-weight: normal;line-height: 100%;letter-spacing: normal;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: left;color: #606060 !important;">LA Free Day</h3>
On October 28, enjoy complimentary admission to view the Skirball’s Pacific Standard Time: LA/LA exhibitions, <a href="https://www.skirball.org/exhibitions/another-promised-land-anita-brenners-mexico" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #EB4102;font-weight: normal;text-decoration: underline;" target="_blank">Another Promised Land: Anita Brenner’s Mexico</a> and <a href="https://www.skirball.org/exhibitions/surface-tension-ken-gonzales-day" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #EB4102;font-weight: normal;text-decoration: underline;" target="_blank">Surface Tension by Ken Gonzales-Day: Murals, Signs, and Mark‐Making in LA.</a><br>
For a list of all PST: LA/LA institutions in the West LA and Valley region participating in this FREE day, visit <a href="http://www.pacificstandardtime.org/" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #EB4102;font-weight: normal;text-decoration: underline;" target="_blank">pacificstandardtime.org</a>.<br>
<br>
<a href="https://www.skirball.org/programs/special-event/pacific-standard-time-lala-free-day-west-la-and-valley-region" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;color: #EB4102;font-weight: normal;text-decoration: underline;" target="_blank">Check it Out Here!</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- // END COLUMNS --></td>
</tr>
</table>有人有这方面的经验吗？
【问题讨论】：
-
您在测试什么电子邮件客户端（在 android 上）？在 Android 上将列变成行怎么样？
-
我正在测试 Litmus，测试 Gmail (Android) 和 Android 4。
-
你最好的选择是将它分成列。2列以一种奇怪的方式调整大小
标签： android html css html-email