У меня есть 3 столбца адаптивного макета электронной почты (код ниже). Это работает почти идеально. Это хорошо видно на мобильных устройствах и даже в Outlook-клиенте для настольных ПК. Но по какой-то причине последнее изображение в Gmail и Outlook.com имеет высоту в один пиксель. Я знаю, что это, вероятно, из-за ширины 100%, но кто-нибудь знает, как это исправить? Вы увидите, что я даже установил ширину и высоту пикселей на своих изображениях, но, поскольку контейнер имеет 100% ширину, я думаю, что это приводит к его отказу. Есть ли хаки для этого?
Я добавил изображение и руководство по Photoshop, и вы можете четко видеть, что последний расширяется на один пиксель ниже остальных.
<table cellspacing="0" cellpadding="0" style="width: 100%;">
<tr>
<td>
<table cellspacing="0" cellpadding="0" style="width: 100%;">
<tr>
<td valign="top" class="responsive-td block3up" style="width: 180px; padding-right: 5px;padding-left:10px;">
<table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%;" class="stylingblock-content-wrapper">
<tr>
<td class="stylingblock-content-wrapper camarker-inner">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><img data-assetid="84953" src="http://image.e-mail.visitorlando.com/lib/fe9a13727465007874/m/2/4adc30d0-46be-4e10-bdd5-b28937548ba4.jpg" height="120" width="180" style="display: block; padding: 0px 0px 10px; text-align: center; height: auto; width: 100%; border: 0px;"></td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; margin: 0px;" class="stylingblock-content-wrapper">
<tr>
<td style="padding: 10px 0px;" class="stylingblock-content-wrapper camarker-inner">
<i><a alias="" class="blockme" conversion="false" data-linkto="http://" href="http://www.visitorlando.com/blog/index.cfm/2018/1/17/Free-Resources-for-Planning-Your-Next-Orlando-Vacation/" style="color:#808080;text-decoration:none;" title="">Free Resources for a Perfect Orlando Holiday</a></i>
<div style="font-size:12px;padding:10px 0 10px;margin-top:10px;">
<span class="blockme2">Whether it’s your first trip to Orlando or you’re coming back for more, Visit Orlando has free, trusted resources designed to help you plan your perfect Orlando holiday, including our Official Visitor Center, Live Chat assistance, an innovative mobile app and much more!</span></div>
</td>
</tr>
</table>
</td>
<td valign="top" class="responsive-td block3up" style="width: 180px; padding-left: 5px; padding-right: 5px;">
<table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper">
<tr>
<td class="stylingblock-content-wrapper camarker-inner">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><img data-assetid="84871" src="http://image.e-mail.visitorlando.com/lib/fe9a13727465007874/m/2/0739b042-e92e-42a9-b294-9be63f8a3000.jpg" height="120" width="180" style="display: block; padding: 0px 0px 10px; text-align: center; height: auto; width: 100%; border: 0px;"></td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; margin: 0px;" class="stylingblock-content-wrapper">
<tr>
<td style="padding: 10px 0px;" class="stylingblock-content-wrapper camarker-inner"><i><a alias="" class="blockme" conversion="false" data-linkto="http://" href="http://www.visitorlando.com/discounts-and-tickets/" style="color:#808080;text-decoration:none;" title="">Save Big With Orlando Deals & Discounts</a></i>
<div style="font-size:12px;padding:10px 0 10px;margin-top:10px;">
<span class="blockme2">Not only is Visit Orlando a trusted source for discounted tickets to the world’s most popular theme parks and attractions, but we’re also your source for bargains throughout the destination. Save on resorts, dining, shopping and everything else you’ll want to do in Orlando!</span></div>
</td>
</tr>
</table>
</td>
<td valign="top" class="responsive-td block3up" style="width: 180px; padding-left: 5px;padding-right:10px;">
<table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper">
<tr>
<td class="stylingblock-content-wrapper camarker-inner">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><img data-assetid="84872" src="http://image.e-mail.visitorlando.com/lib/fe9a13727465007874/m/2/db9decce-c593-4bbd-a3c2-e819df747c47.jpg" height="120" width="180" style="display: block; padding: 0px 0px 10px; text-align: center; height: auto; width: 100%; border: 0px;"></td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; margin: 0px;" class="stylingblock-content-wrapper">
<tr>
<td style="padding: 10px 0px;" class="stylingblock-content-wrapper camarker-inner"><i><a alias="" class="blockme" conversion="false" data-linkto="http://" href="http://www.visitorlando.com/blog/index.cfm/2018/2/07/Have-a-Blast-at-the-Newest-Attractions-in-Orlando" style="color:#808080;text-decoration:none;" title="">Blast Off With Orlando’s Newest Thrills</a></i>
<div style="font-size:12px;padding:10px 0 10px;margin-top:10px;">
<span class="blockme2">Orlando is constantly improving. In fact, we added so many new attractions in 2017 that, even if you’ve visited recently, you probably haven’t seen them all — starting with all-new thrills at Walt Disney World Resort, Universal Orlando Resort, SeaWorld Orlando and LEGOLAND Florida Resort!</span></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
А вот CSS в заголовке тега
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
ReadMsgBody{ width: 100%;}
.ExternalClass {width: 100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
body {-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;margin:0 !important;}
p { margin: 1em 0;}
table td { border-collapse: collapse;}
img {outline:0;}
a img {border:none;}
p {margin: 1em 0;}
@-ms-viewport{ width: device-width;}
</style>
<style type="text/css">
@media only screen and (max-width: 480px) {
.container {width: 100% !important;}
.footer { width:auto !important; margin-left:0; }
.content-padding{ padding:4px !important; }
.mobile-hidden { display:none !important; }
.logo { display:block !important; padding:0 !important; }
img { max-width:100% !important; height:auto !important; max-height:auto !important;}
.header img{max-width:100% !important;height:auto !important; max-height:auto !important;}
.photo img { width:100% !important; max-width:100% !important; height:auto !important;}
.drop { display:block !important; width: 100% !important; float:left; clear:both;}
.footerlogo { display:block !important; width: 100% !important; padding-top:15px; float:left; clear:both;}
.nav4, .nav5, .nav6 { display: none !important; }
.tableBlock {width:100% !important;}
.responsive-td {width:100% !important; display:block !important; padding:0 !important; }
.fluid, .fluid-centered {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
/* MOBILE GLOBAL STYLES - DO NOT CHANGE */
body, .tb_properties{font-family: Arial !important; font-size: 25px !important; color: #808080 !important; line-height: 1.5 !important; padding: 0px !important; }.buttonstyles{font-family: arial, helvetica, sans-serif !important; font-size: 16px !important; color: #FFFFFF !important; padding: 10px !important; }h1{font-family: Arial !important; font-size: 28px !important; color: #202020 !important; line-height: 1 !important; }h2{font-family: Arial !important; font-size: 20px !important; color: #202020 !important; line-height: 1 !important; }h3{font-family: Arial !important; font-size: 18px !important; color: #202020 !important; line-height: 1 !important; }a:not(.buttonstyles){line-height: 1 !important; }.mobile-hidden{display: none !important; }
/* END OF MOBILE GLOBAL STYLES - DO NOT CHANGE */
.block3up { padding: 20px !important;background:#efefef;}
.blockme2{font-size:22px !important;}
.blockme{font-size:25px !important;}
}
@media only screen and (max-width: 640px) {
.container { width:100% !important; }
.mobile-hidden { display:none !important; }
.logo { display:block !important; padding:0 !important; }
.photo img { width:100% !important; height:auto !important;}
.nav5, .nav6 { display: none !important;}
.fluid, .fluid-centered {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
}
</style>
<!--[if mso]>
<style type="text/css">
/* Begin Outlook Font Fix */
body, table, td {
font-family: Arial, Helvetica, sans-serif ;
font-size:16px;
color:#808080;
line-height:1;
}
/* End Outlook Font Fix */
</style>
<![endif]-->
</head>
