无法在移动视图中堆叠图像

问题描述 投票：0回答：1

我在内容部分中有三张图像，它们形成了一个大的电子邮件切片图像（smart_img1，smart_img2，smart_img3。在移动视图中，我需要首先显示中心切片，因为它是电子邮件的主要标题/图标本身。我觉得我已经尝试了所有内容-z-index似乎也不起作用，order也不起作用。我是否犯了一些新手错误？这是我正在使用的代码：

<style type="text/css">
body {
  margin: 0;
  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 !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_org a {
  color: #FF8A29 ;
  text-decoration: none ;
}

.em_grey a {
  color: #6C6863 ;
  text-decoration: none ;
}

.em_grey2 a {
  color: #53534a ;
  text-decoration: none ;
}

.em_g_img + div {
 display: none;
}

@media only screen and (min-width:481px) and (max-width:699px) {
.em_main_table {width: 481px !important;}
.em_wrapper{width: 100% !important;}
.em_hide{display:none !important;}
.em_full_img{width:100% !important;height:auto !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_width1{ width:300px !important;}
.em_bg_height{ height:429px !important ; }
.em_logo{ width: 150px !important; height: auto !important;}
.em_h30{height:30px !important;}
.em_bg{background-image:url(images/bg_banner_1.jpg.jpg) !important;}
.em_mob_block{display:block !important;}
.em_hauto { height: auto !important; }
.em_font2{ font-size: 30px !important; line-height:35px !important; }
.em_clear{clear:both !important; width:100% !important; display:block !important;}
}

@media only screen and (min-width:375px) and (max-width:480px) {
.full {display:block; width:100%; !important;}
.em_main_table {width: 375px !important;}
.em_wrapper{width: 100% !important;}
.em_hide{display:none !important;}
.em_full_img{width:100% !important;height:auto !important;}
.em_full_img img{width:100% !important;height:auto !important;}
.em_center{text-align:center !important;}
.em_left{text-align:left !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_p10{padding:10px !important;}
.em_p15{padding:15px !important;}
.em_plrb15{padding:0px 15px 15px 15px !important;} /* Padding Left Right Bottom */
.em_h20{height:20px !important; font-size: 1px!important; line-height: 1px!important;}
.em_width1{ width:300px !important;}
.em_bg_height{ height:324px !important ; }
.em_logo{ width: 100px !important; height: auto !important;}
.em_h30{height:30px !important;}
.em_bg{background-image:url(images/bg_banner_3.jpg) !important;}
.em_h10{ height:10px !important;}
.em_mob_block{display:block !important;}
.em_hauto { height: auto !important; }
.em_font2{ font-size: 25px !important; line-height:30px !important; }
.em_font_N {font-size: Npx} /* update the N number as per font-size */
.em_wN { width:Npx !important; } /* update the N number as per width */
.em_clear{clear:both !important; width:100% !important; display:block !important;}
}

@media screen and (max-width: 375px) { 

.em_main_table {width: 320px !important;}
.em_wrapper{width: 100% !important;}
.em_hide{display:none !important;}
.em_full_img{width:100% !important;height:auto !important;}
.em_full_img img{width:100% !important;height:auto !important;}
.em_center{text-align:center !important;}
.em_left{text-align:left !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_p10{padding:10px !important;}
.em_font2{ font-size: 20px !important; line-height:30px !important; }
.em_width1{ width:300px !important;}
.em_bg_height{ height:285px !important ; }
.em_logo{ width: 100px !important; height: auto !important;}
.em_h30{height:30px !important;}
.em_bg{background-image:url(images/bg_banner_2.jpg) !important;}
.em_h10{ height:10px !important;}
.em_font3{ font-size: 30px !important; line-height:32px !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; }

u + .em_body .em_full_wrap { width:100% !important; width:100vw !important;}
}

</style>
</head>

<body class="em_body" style="margin:0px auto; padding:0px;">
<!-- == Body Section == -->
<table border="0" cellpadding="0" cellspacing="0" class="em_full_wrap" width="100%">
    <tbody>
        <tr>
            <td align="center" valign="top">
            <table align="center" border="0" cellpadding="0" cellspacing="0" class="em_main_table" style="width:700px; table-layout:fixed;" width="700"><!-- Banner section -->
                <tbody>
                </tbody>
            </table>

            <table border="0" cellpadding="0" cellspacing="0" class="em_wrapper" style="width:700px;" width="700">
                <tbody>
                    <tr>
                        <td class="em_h10" height="20" style="height:20px; font-size:0px; line-height:0px;">&nbsp;</td>
                    </tr>
                    <tr>
                        <td align="center" valign="top">
                        <table align="center" border="0" cellpadding="0" cellspacing="0" class="em_wrapper" style="width:700px;" width="700">
                            <tbody>
                                <tr style="">
                                    <td class="em_side10" style="width:25px;" width="25">&nbsp;</td>
                                    <td align="left" pardot-region="logo" valign="top"><a href="http://www.highlandhomes.com"><img alt="Highland Homes" border="0" class="em_logo" height="50" src="https://go.highlandhomes.com/l/464142/2018-10-08/33k5s/464142/7497/Highland_B7U.png" style="display: block; font-family: Arial, sans-serif; font-size: 12px; line-height: 14px; color: rgb(0, 0, 0); width: 150px; border-width: 0px; border-style: solid; height: 50px;" width="150"></a></td>
                                    <td class="em_width1" style="width:463px;" width="463">&nbsp;</td>
                                    <td align="center" style="width:98px;" valign="top" width="98">
                                    <table align="right" border="0" cellpadding="0" cellspacing="0" style="width:98px;" width="98">
                                        <tbody>
                                            <tr style="">
                                                <td align="center" pardot-region="hd_icon1" style="font-size:0px;line-height:0px;" valign="middle"><a href="https://www.facebook.com/HighlandHomesTX"><img alt="Facebook" border="0" height="15" src="https://go.highlandhomes.com/l/464142/2018-10-08/33k8z/464142/7539/Asset_13_8.png" style="display: block; max-width: 16px; font-family: Arial, sans-serif; font-size: 12px; line-height: 15px; color: rgb(0, 0, 0); width: 16px; height: 15px; border-width: 0px; border-style: solid;" width="16"></a></td>
                                                <td style="width:10px;" width="10">&nbsp;</td>
                                                <td align="center" pardot-region="hd_icon2" style="font-size:0px;line-height:0px;" valign="middle"><a href="https://www.pinterest.com/txhighlandhomes"><img alt="Pinterest" border="0" height="16" src="https://go.highlandhomes.com/l/464142/2018-10-08/33k7n/464142/7531/Asset_14_8.png" style="display: block; max-width: 16px; font-family: Arial, sans-serif; font-size: 12px; line-height: 15px; color: rgb(0, 0, 0); width: 16px; height: 16px; border-width: 0px; border-style: solid;" width="16"></a></td>
                                                <td style="width:10px;" width="10">&nbsp;</td>
                                                <td align="center" pardot-region="hd_icon3" style="font-size:0px;line-height:0px;" valign="middle"><a href="https://www.twitter.com/HighlandHomesTX"><img alt="Twitter" border="0" height="15" src="https://go.highlandhomes.com/l/464142/2018-10-08/33k94/464142/7543/Asset_15_8.png" style="display: block; max-width: 16px; font-family: Arial, sans-serif; font-size: 12px; line-height: 15px; color: rgb(0, 0, 0); width: 16px; height: 15px; border-width: 0px; border-style: solid;" width="16"></a></td>
                                                <td style="width:10px;" width="10">&nbsp;</td>
                                                <td align="center" pardot-region="hd_icon4" style="font-size:0px;line-height:0px;" valign="middle"><a href="https://www.instagram.com/HighlandHomesTX"><img alt="Instagram" border="0" height="17" src="https://go.highlandhomes.com/l/464142/2018-10-08/33k96/464142/7545/Asset_16_8.png" style="display: block; max-width: 17px; font-family: Arial, sans-serif; font-size: 12px; line-height: 15px; color: rgb(0, 0, 0); width: 17px; height: 17px; border-width: 0px; border-style: solid;" width="17"></a></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    </td>
                                    <td class="em_side10" style="width:25px;" width="25">&nbsp;</td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]--></td>
        </tr>
        <!-- //Banner section --><!-- Content section -->
        <tr>
            <td align="center" valign="top">
            <table align="center" border="0" cellpadding="0" cellspacing="0" class="em_wrapper" style="width:700px;" width="700">
                <tbody>
                    <tr>
                        <td class="em_side10" style="width:20px;" width="20">&nbsp;</td>
                        <td align="center" valign="top">
                        <table align="center" border="0" cellpadding="0" cellspacing="0" class="em_wrapper" style="width:660px;" width="660">
                            <tbody>
                                <tr>
                                    <td height="20" style="height:20px;font-size:0px;line-height:0px;">&nbsp;</td>
                                </tr>
                                <tr style="">
                                    <td align="center" class="em_grey em_font2" pardot-data="line-height:15px;" pardot-region="text1" style="font-family: &quot;Futura Std&quot;, &quot;Trebuchet MS&quot;, Arial, sans-serif; font-size: 30px; line-height: 15px; color: rgb(108, 104, 99); font-weight: 300;" valign="top">
                                    <p><strong><span style="font-size:16px;"><span style="line-height: 1.5;">At Highland Homes, we focus not just on quality construction, but also on the livability. We want your home to work for you - brilliantly.</span></span></strong><br>
                                    &nbsp;</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="center" class="em_full_img" pardot-region="banner" style="width:700px;" width="700">
                                    <table align="center" border="0" cellpadding="0" cellspacing="0" class="pd-table" dir="ltr" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; max-width: 700px;">
                                        <tbody>
                                            <tr>
                                                <td class="full smart_img1" dir="ltr" style="text-align: center;" valign="top" width="30%"><img alt="" border="0" height="457" src="https://go.highlandhomes.com/l/464142/2020-01-09/52852i/464142/24147/SmartStart3_01.png" style="height: 457px; max-width: 220px; width: 220px; border-width: 0px; border-style: solid;" width="220"></td>
                                                <td class="full smart_img2" dir="ltr" style="text-align: center;" valign="top" width="30%"><img alt="" border="0" height="457" src="https://go.highlandhomes.com/l/464142/2020-01-09/52854i/464142/24149/SmartStart3_02.png" style="height: 457px; max-width: 220px; width: 220px; border-width: 0px; border-style: solid;" width="220"></td>
                                                <td class="full smart_img3" dir="ltr" style="text-align: center;" valign="top" width="30%"><img alt="" border="0" height="457" src="https://go.highlandhomes.com/l/464142/2020-01-09/52856i/464142/24151/SmartStart3_03.png" style="height: 457px; max-width: 220px; width: 220px; border-width: 0px; border-style: solid;" width="220"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    </td>
                                </tr>
                                <tr style="">
                                    <td align="center" class="em_grey em_font2" pardot-data="line-height:25px;" pardot-region="text1" style="font-family: &quot;Futura Std&quot;, &quot;Trebuchet MS&quot;, Arial, sans-serif; font-size: 30px; line-height: 25px; color: rgb(108, 104, 99); font-weight: 300;" valign="top"><br>
                                    <span style="font-size:18px;">These standard features* make it even easier to be in total control of your Highland Home, all from your personal device.<br>
                                    <br>
                                    <a href="https://www.highlandhomes.com/smart-home?utm_source=newsletter&amp;utm_medium=email&amp;utm_campaign=SmartStart"><span style="background-color:#648F69; color:white;padding:9px;box-shadow: 5px 5px 8px #777777;">Learn More</span></a></span></td>
                                </tr>
                                <tr>
                                    <td class="em_h20" height="30" style="height:30px;font-size:0px;line-height:0px;">&nbsp;</td>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                        <td class="em_side10" style="width:20px;" width="20">&nbsp;</td>
                    </tr>
                </tbody>
            </table>
            </td>
        </tr>
        <!-- //Content section -->
        <tr>
            <td class="em_hide" style="line-height:1px;min-width:700px;background-color:#ffffff;"><img alt="" border="0" height="1" src="images/spacer.gif" style="max-height:1px; min-height:1px; display:block; width:700px; min-width:700px;" width="700"></td>
        </tr>
    </tbody>
</table>```

Sorry its long - I'm still fairly new at this and I've just about had it with this project... I did not write all of this code either btw - was a template another person made and I've had to work with it. Please help if you can!
html css email html-email pardot
1个回答
0
投票

根据我的经验，td需要内联代码才能堆叠（仅在所需的断点上）。请参阅附带的代码段以及新添加的CSS

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.