html - 如何在手机上制作表格堆栈？

Question

在处理新闻稿模板时，我试图获得一个包含三个广告(以及中间的间隙)的表格，以便在移动设备上一个显示在另一个广告下方，同时在桌面上显示为一行(其表现符合预期现在)。

我查看了媒体查询和类，看看我能做什么，包括显示: block 等等，但还没有想出任何可用于测试的东西。

这是存放这些图片的表格:

<!-- begin snippet: js hide: false console: true babel: false -->

<table idstyle="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
  <tbody>
    <tr>
      <td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${freeTextBackgroundColor};"
        bgcolor="${freeTextBackgroundColor}" valign="top">
        <center>
          <table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;"
            align="center" border="0" cellpadding="0" cellspacing="0" width="600">
            <tbody>
              <tr>
                <td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${freeTextSpacer};font-size:${freeTextSpacer};"
                  height="${freeTextSpacer}">&nbsp;</td>
              </tr>
              <tr>
                <td class="secondary-font text" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none;font-family:'Lato', Arial, sans-serif;font-size: 14px;line-height: 23px;color: #666666;border-collapse: collapse;">
                  <div>
                    <table>
                      <tbody>
                        <tr>
                          <td align="center" valign="top" width="300" style="width: 300px;"> <a href="<URL IT GOES TO>"> <img src="<IMG SRC FOR BLOCK 1>" /> </a></td>
                          <td align="center" valign="top" width="50" style="width: 50px;"></td>
                          <td align="center" valign="top" width="300" style="width: 300px;"> <a href="<URL IT GOES TO>"> <img src="<IMG SRC FOR BLOCK 1>" /> </a></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${freeTextSpacer2};font-size:${freeTextSpacer2};"
                  height="${freeTextSpacer2}">&nbsp;</td>
              </tr>
            </tbody>
          </table>
        </center>
      </td>
    </tr>
  </tbody>
</table>

桌面 View (工作):

移动 View (问题):

我需要保持桌面不变，但让移动设备上的两个 block 一个一个地出现在另一个下面。

Answer 1

/* Prevent WebKit and Windows mobile changing default text sizes */
      body, table, td, a{-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
      /* RESET STYLES */
      img{border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none;}
      table{border-collapse: collapse !important;}
      body{height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important;}
      table, td { border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt !important;}
      /* remove the download icon from gmail*/
      img + div { display:none; }
      /* iOS BLUE LINKS */
      a[x-apple-data-detectors] {
      color: inherit !important;
      text-decoration: none !important;
      font-size: inherit !important;
      font-family: inherit !important;
      font-weight: inherit !important;
      line-height: inherit !important;
      }
      @media only screen and (max-width: 525px) {
      /* ALLOWS FOR FLUID TABLES */
      .wrapper {
      width: 100% !important;
      max-width: 100% !important;
      }
      /* FULL-WIDTH TABLES */
      .responsive-table {
      width: 100% !important;
      }
      /* ADJUST BUTTONS ON MOBILE */
      .mobile-button-container {
      margin: 0 auto;
      width: 100% !important;
      }
      /* FULL WIDTH IMAGE */
      .img-max {
      max-width: 100% !important;
      width: 100% !important;
      height: auto !important;
      }
      /* EVENT SECTION BUTTON */
      .button-padding {
      padding-left: 30px;
      padding-right: 30px;
      }
      .mobile-center {
      text-align: center !important;
      }
      .remove-float {
      float: none !important;
      margin: 0 auto !important;
      display: inline-block !important;
      }
      .normal-padding {
      padding-top: 20px !important;
      }
      table[class="body"] .content--wrapper {
      padding-left: 20px !important;
      padding-right: 20px !important;
      }
      table[class="body"] .responsive-table {
      float: none !important;
      width: 100% !important;
      clear: both;
      }
      .center-responsive{
      text-align: -webkit-center;
      }
      }
      @media screen and (max-width: 599px) {
      .container {
      width: 100%!important;
      }
      .wrapper {
      width: 100% !important;
      max-width: 100% !important;
      }
      .mobile-center {
      width: 100% !important;
      text-align: center !important;
      }
      .remove-float {
      float: none !important;
      margin: 0 auto !important;
      display: inline-block !important;
      }
      .col-2 {
      max-width: 100% !important;
      width: 100% !important;
      }
      .col-3 {
      max-width: 100% !important;
      width: 100% !important;
      }
      .pi-col-wrapper {
      display: block;
      width: 100%!important;
      }
      .pi-col {
      width: 100%;
      }
      .center-responsive{
      text-align: -webkit-center;
      }
      }
      @media screen and (min-width: 600px) {
      .container {
      width: 600px!important;
      margin: 0 auto!important;
      }
      .mobile-center {
      width: 100% !important;
      }
      .col-2 {
      display: inline-block !important;
      width: 262px !important;
      }
      .col-3 {
      display: inline-block !important;
      width: 185px !important;
      }
      .fluid-wrapper {
      width: 540px !important;
      }
      .pi-col-wrapper {
      display: inline-block;
      width: 50%!important;
      }
      .pi-col {
      width: 255px !important;
      }
      .center-responsive{
      text-align: -webkit-right;
      }
      }
      /* ANDROID CENTER FIX */
      div[style*="margin: 16px 0;"] { margin: 0 !important; }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
    <meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>Janssen</title>
    <!--[if gte mso 9]>
    <style>
      sup { font-size: 100% !important; }
    </style>
    <xml>
      <o:OfficeDocumentSettings>
        <o:AllowPNG/>
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
  </head>
  <body style="-moz-osx-font-smoothing: grayscale; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; background-color: #f4f4f4; color: #4e5054; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 18px; margin: 0; min-width: 100%; padding: 0; text-align: left; width: 100% !important;">
    <table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#f4f4f4" style="width:100% !important;">
      <tbody>
        <tr>
          <td align="center" valign="top">
            <table class="container" cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#ffffff">
              <tbody>
                <!-- ========== INTRO TEXT WITH SIGNATURE STARTS ========== -->
                <tr>
                  <td class="content--wrapper" style="-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; border-collapse: collapse; color: #717171; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-smoothing: antialiased; font-weight: normal; line-height: 20px; margin: 0; padding: 15px 30px 37px; text-align: left; vertical-align: top;">
                    <table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%; width: 100% !important;">
                      <tbody>
                        <tr>
                          <td bgcolor="#ffffff" align="center" style="padding: 0;" class="section-padding">
                            <table border="0" cellpadding="0" cellspacing="0" width="540" style="padding: 0;" class="responsive-table">
                              <tbody>
                                <tr>
                                  <td align="center" height="100%" valign="top" width="100%" style="padding-bottom: 20px;">
                                    <!--[if (gte mso 9)|(IE)]>
                                    <table align="center" border="0" cellspacing="0" cellpadding="0" width="540">
                                      <tr>
                                        <td align="center" valign="top" width="540">
                                          <![endif]-->
                                          <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:540;">
                                            <tbody>
                                              <tr>
                                                <td align="left" valign="top" style="font-size:0;" bgcolor="#f7f7f7">
                                                  <!--[if (gte mso 9)|(IE)]>
                                                  <table align="center" border="0" cellspacing="0" cellpadding="0" width="540">
                                                    <tr>
                                                      <td align="left" valign="top" width="268">
                                                        <![endif]-->
                                                        <div style="display:inline-block; max-width:268px; vertical-align:top; width:100%;" class="wrapper">
                                                          <table align="left" border="0" cellpadding="0" cellspacing="0" width="168" class="wrapper">
                                                            <tbody>
                                                              <tr>
                                                                <td valign="top">
                                                                  <a href="https://www.google.com" target="_blank"><img src="https://dummyimage.com/262x170/000/fff.png" alt="alt text here" width="262" height="170" border="0" style="display: block; font-family: Arial; color: #266e9c; font-size: 14px;" class="wrapper"></a>
                                                                </td>
                                                              </tr>
                                                            </tbody>
                                                          </table>
                                                        </div>
                                                        <!--[if (gte mso 9)|(IE)]>
                                                      </td>
                                                      <td align="left" valign="top" width="268">
                                                        <![endif]-->
                                                        <div style="display:inline-block; max-width:268px; vertical-align:top; width:100%;" class="wrapper">
                                                          <table align="left" bgcolor="#f7f7f7" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 268px; float: right;" class="wrapper">
                                                            <tbody>
                                                              <tr>
                                                                <td style="padding: 15px;padding-top: 27px" class="no-padding">
                                                                  <!-- ARTICLE -->
                                                                  <table border="0" cellspacing="0" cellpadding="0" width="100%">
                                                                    <tbody>
                                                                      <tr>
                                                                        <td align="left" style="font-size: 13px; line-height: 20px; color: #717171; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; text-decoration: none;" class="padding-copy">
                                                                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                                                                        </td>
                                                                      </tr>
                                                                      <tr>
                                                                        <td align="left" style="font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif; font-size: 12px; font-weight: normal; line-height: 20px; padding-bottom: 9px;padding-top: 16px;" class="">
                                                                          <table border="0" cellspacing="0" cellpadding="0">
                                                                            <tbody>
                                                                              <tr>
                                                                                <td align="center" style="border-radius: 5px; padding:9px 14px 9px 14px;" bgcolor="#002060">
                                                                                  <a href="https://www.google.com" target="_blank" style="font-size: 14px; font-family: 'Verdana', 'Arial', 'Helvetica', sans-serif;font-weight: bold; color: #ffffff; text-decoration: none; color: #ffffff; text-decoration: none; border-radius: 5px; display: inline-block; text-transform: uppercase; vertical-align: middle;" class="mobile-button">READ MORE &gt;</a>
                                                                                </td>
                                                                              </tr>
                                                                            </tbody>
                                                                          </table>
                                                                        </td>
                                                                      </tr>
                                                                    </tbody>
                                                                  </table>
                                                                </td>
                                                              </tr>
                                                            </tbody>
                                                          </table>
                                                        </div>
                                                        <!--[if (gte mso 9)|(IE)]>
                                                      </td>
                                                    </tr>
                                                  </table>
                                                  <![endif]-->
                                                </td>
                                              </tr>
                                            </tbody>
                                          </table>
                                          <!--[if (gte mso 9)|(IE)]>
                                        </td>
                                      </tr>
                                    </table>
                                    <![endif]-->
                                  </td>
                                </tr>
                                <!-- ========== LEFT RIGHT TWO COLUMN WITH THUMBNAIL ENDS ========== -->
                              </tbody>
                            </table>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

我已经在 outlook 上测试过，也检查了 iPhone 上的方向问题。它在设备上完美运行。只需放入内容并相应调整即可。希望对你有帮助