【发布时间】：2021-02-04 20:24:37
【问题描述】：
我有一个电子邮件布局，它的功能是一个宽列，底部有两个较小的列，以保持一对链接图像水平。目前，我正在努力让布局在移动设备上很好地发挥作用——如果我能让表格填满屏幕，最左边的图像就会完全消失，如果我能让两个按钮在移动设备上水平显示，容器就会中断。我对响应式布局的理解参差不齐，但我正试图弄清楚如何使这项工作很好地发挥作用——这很复杂，尤其是因为我的客户群严重倾斜 Outlook。
CSS 和 HTML 下面。感谢任何帮助！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body class="em_body" style="margin:0px auto; padding:0px;" bgcolor="#f7f6f2"> <u></u>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<title>Lorem </title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0 ">
<meta name="format-detection" content="telephone=no">
<!--[if !mso]><!-->
<style>
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');
</style>
<!--<![endif]-->
<!--[if mso]>
<style type="text/css">
body, table, td {font-family: Trebuchet MS, sans-serif !important;}
</style>
<![endif]-->
<style type="text/css">
body { margin: 0 auto; padding: 0; -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; -webkit-font-smoothing: antialiased !important; }
img { border: 0 !important; outline: none !important; }
p { Margin: 0px auto !important; Padding: 0px !important; }
table { border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px; }
td, a, span { border-collapse: collapse; mso-line-height-rule: exactly; }
.ExternalClass * { line-height: 100%; }
.em_defaultlink a { color: inherit !important; text-decoration: none !important; }
.em_defaultlinku a { color: inherit !important; text-decoration: underline !important; }
.em_g_img + div { display: none; }
a[x-apple-data-detectors], u + .em_body a, #MessageViewBody a { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }
.em_white a { color: #ffffff; text-decoration: none; }
.em_black a { color: #000000; text-decoration: none; }
.em_grey a{text-decoration:underline; color: #5e687b;}
.cta_insta a:hover{opacity:0.8 !important;}
@media only screen and (max-width:599px) {
.em_main_table { width: 100% !important; }
.em_wrapper { width: 100% !important; }
.em_hide { display: none !important; }
.em_full_img img { width: 100% !important; height: auto !important; }
.em_center { text-align: center !important; }
.em_side10 { width: 10px !important; }
.em_aside10 { padding: 0px 10px !important; }
.em_side15 { width: 15px !important; }
.em_aside15 { padding: 0px 15px !important; }
.em_ptop { padding-top: 20px !important; }
.em_pbottom { padding-bottom: 20px !important; }
.em_h20 { height: 20px !important; font-size: 1px!important; line-height: 1px!important; }
.em_h30 { height: 30px !important; }
.em_mob_block { display: block !important; }
.em_hauto { height: auto !important; }
.em_clear { clear: both !important; width: 100% !important; display: block !important; }
.em_pad { padding: 15px 0px!important; }
.em_p0 { padding: 0px !important; }
u + .em_body .em_full_wrap { width: 100% !important; width: 100vw !important; }
}
@media screen and (max-width: 479px) {
.em_w250 img{width: 250px !important; height: auto !important;}
}
</style>
<!-- == Header Section == -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="em_full_wrap" bgcolor="#f7f6f2" style="table-layout:fixed;">
<tbody><tr>
<td align="center" valign="top"><table align="center" width="600" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="width:600px; table-layout:fixed;">
<tbody><tr>
<td width="20" style="width: 20px;" class="em_side15"> </td>
<td align="center" valign="top" style="padding: 10px 0px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td class="em_defaultlinku" align="left" valign="top" style="font-size: 11px;line-height: 19px; font-family: 'Segoe', 'Lato', Trebuchet MS, sans-serif; color: #5e687b;">
A project of the <a style="text-decoration: underline; color: #5e687b;" target="_blank" href="" sib_link_id="-2"><span style="text-decoration: underline; color: #5e687b;">me</span></a>
</td>
<td class="em_defaultlinku" align="right" valign="top" style="font-size: 11px;line-height: 19px; font-family: 'Segoe', 'Lato', Trebuchet MS, sans-serif; color: #5e687b;"><a style="text-decoration: underline; color: #5e687b;" target="_blank" href="https://4gyqr.r.bh.d.sendibt3.com/mk/cl/f/XUnKP49MNRJGqrTlNljomt86K0iNsgdAd6geoccV9wjEoMk4WDUFVtfu35Pch2qMizkrVxMHdgNeKkma-D8pvKI4brXSZeUJcwGASatkf8QC7fvoy2lzRiF_nJ3iplyaHM_VMwh7WfRCLNOA_b_UZgVhaDjK93nLSRu-xdfS9NFxUKEeDSfMmwENzXkMGHNu_L__CmSYdD3h4oaUPw_Ec4Bqf9Oe07sJYlx-plI36Pr30fP3MilbymBwzRvgWQ" sib_link_id="-2"><span style="text-decoration: underline; color: #5e687b;">View in browser</span></a>
</td>
</tr>
</tbody>
</table>
</td>
<td width="20" style="width: 20px;" class="em_side15"> </td>
</tr>
</tbody></table></td>
</tr>
</tbody></table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="em_full_wrap" bgcolor="#3c81b7" style="table-layout:fixed;">
<tbody><tr>
<td align="center" valign="top" class="em_aside10"><table align="center" width="600" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="width:600px; table-layout:fixed;">
<tbody><tr>
<td align="center" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td width="15" style="width: 15px;"> </td>
<td align="center" valign="top" style="padding: 33px 0px 34px;" class="em_pad">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td align="center" valign="top" class="em_w250">
<a href="" target="_blank" style="text-decoration: none;" sib_link_id="-2">
<img src="" width="600px" alt="" border="0" style="display: block; max-width: 600px; font-size: 14px; font-family: Trebuchet MS, sans-sarif; line-height: 16px; color: #ffffff; font-weight: bold;" sib_img_id="0" sib_img_id="6"> </a>
</td>
</tr>
</tbody>
</table>
</td>
<td width="15" style="width: 15px;"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" class="em_full_img">
<img style="display: block; max-height: 600px;" border="0" alt="" width="600" src="https://img.mailinblue.com/2622083/images/rnb/original/5e5ea936a209c5f1bb63e3a4.png?t=1603303476946" sib_img_id="1" sib_img_id="7">
</td>
</tr>
</tbody></table></td>
</tr>
</tbody>
</table>
<!-- == //Header Section == -->
<!-- == Body Section == -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="em_full_wrap" bgcolor="#f7f6f2" style="table-layout:fixed;">
<tbody>
<tr>
<td align="center" valign="top" class="em_aside10">
<table align="center" width="600" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="width:600px; table-layout:fixed;">
<!-- Banner section -->
<tbody>
<tr>
<td align="center" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<tbody>
<tr>
<td width="20" style="width: 20px;" class="em_side15"> </td>
<td align="center" valign="top" style="padding: 10px 0px 10px;" class="em_pad">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td class="em_defaultlink" align="left" valign="top" style="font-size: 18px; font-family: 'Segoe', 'Lato', Trebuchet MS, sans-serif; line-height: 26px; color: #5e687b;">
<br>
<p><span style="font-size:22px; color:#ed7d31;"><strong>Title</strong></span></p>
<br>
<p><span style="font-size:18px; color:#ed7d31;">Subtitle</span></p>
<br>
<p><span style="font-size:18px;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span></p><br>
<p>Download the app today at: </p>
</td>
</tr>
</tbody>
<table dir="ltr" width="100%" border="0" cellspacing="0" cellpadding="10" align="center" class="tablescale">
<tbody>
<tr>
<td>
<a href="" sib_link_id="-2"><img src="https://img.mailinblue.com/2622083/images/rnb/original/5f8f1501bf3088251f084b30.png?t=1603303691818" width="230" style="margin:6%;width:88%"></a>
</td>
<td>
<a href="" sib_link_id="-2"><img src="https://img.mailinblue.com/2622083/images/rnb/original/5f8f1535c87258058403a4b3.png?t=1603303702894" width="280"></a>
</td>
</table>
</td>
<td width="20" style="width: 20px;" class="em_side15"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<tr>
<td align="center" valign="top" class="em_full_img">
<img style="display: block; max-height: 600px;" border="0" alt="" width="600" src="https://img.mailinblue.com/2622083/images/rnb/original/5e5ea90ba8a748ea77252c11.png?t=1603303468240" sib_img_id="4" sib_img_id="10">
</td>
</tr>
</td>
</tr>
</tbody></table>
<!-- == //Body Section == -->
<!-- == Footer Section == -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="em_full_wrap" bgcolor="#f7f6f2" style="table-layout:fixed;">
<tbody><tr>
<td align="center" valign="top"><table align="center" width="500" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="width:500px; table-layout:fixed;" bgcolor="#f7f6f2">
<tbody><tr>
<td align="center" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td class="em_grey em_ptop" align="left" valign="top" style="font-size: 12px; font-family: 'Segoe', 'Lato', Trebuchet MS, sans-serif; line-height: 19px; color: #9a9ca0; padding-top: 30px;">
We sent this email to <a style="text-decoration:underline;color: #5e687b;" href="mailto:{{contact_email}}">{{contact_email}}</a> because you signed up.
<br><br> 【问题讨论】：
标签： html css email mobile responsive