html - 不会并排放置表格的流畅的两列表格布局

标签 html css email html-table fluid-layout

请原谅我的编码新手，因为它是数百种电子邮件布局的科学怪人组合，但有人能告诉我为什么我的 table 布局没有并排显示分栏表格吗？

这是两个 td 元素，其类名 container-small 在 50% width 不会并排放置.我没有使用 float 或 divs。

是不是因为它们是不同的表，而它们本应属于同一个 td？请随时提出其他修改/建议，以便我改进布局。左栏必须正好是 283px，但右栏可以是 100% 流畅的。这确实是唯一的要求。

<!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">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width"/>
        <style type="text/css">
        @media only screen and (min-device-width: 541px), screen and (min-width: 541px) {
            #body {
                width: 600px !important;
            }
        }

        @media only screen and (max-width: 480px) {
            #body {
                width: 100% !important;
            }

            .container {
                display: block !important;
                width: 100% !important;
            }

            .container-small {
                display: block !important;
                width: 100% !important;
            }

            .header-image {
                height: auto !important;
                max-width: 480px !important;
                width: 100% !important;
            }

            .column-image {
                height:auto !important;
                max-width: 283px !important;
                width: 100% !important;
            }

            .content {
                color: #000000;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 100% !important;
                font-weight: normal;
                line-height: 125% !important;
            }
        }

        .container {
            display: block!important;
            max-width: 600px!important;
            margin: 0 auto!important;
            clear: both!important;
        }

        .container-small {
            display: block !important;
            width: 100% !important;
        }

        .header-image {
            height: auto !important;
            max-width: 600px !important;
            width: 100% !important;
        }

        .column-image {
            height: auto !important;
            max-width: 283px !important;
            width: 100% !important;
        }

        .content {
            max-width: 600px;
            margin: 0 auto;
            display: block;
        }

        .content table {
            width: 100%;
        }

        * {
            padding: 0;
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 100%;
            line-height: 125%;
        }

        img {
            -ms-interpolation-mode: bicubic;
        }

        a {
            color: #EC6129;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 100%;
            font-weight: bold;
            line-height: 125%;
            text-decoration: none;
        }

        .ExternalClass {
            width: 100%;
        }

        .ExternalClass,
        .ExternalClass p,
        .ExternalClass span,
        .ExternalClass font,
        .ExternalClass td,
        .ExternalClass div {
            line-height: 100%;
        }

        .msoFix {
            mso-table-lspace:-1pt;
            mso-table-rspace:-1pt;
        }

        .service-text {
            text-align: center;
        }

        .service-text p {
            text-align: left
        }

        .last {
            margin-bottom: 0px;
        }

        .first {
            margin-top: 0px;
        }

        body, .body {
            -webkit-font-smoothing: antialiased;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            width: 100% !important;
            height: 100%;
            display: block;
            max-width: 600px;
            margin: 0 auto;
            margin-top: 20px;
            background-color: #999999;
            color: #000000;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: normal;
            font-size: 100%;
            line-height: 125%;
        }

        h1, h2, h3 {
            color: #000000;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bold;
            font-size: 100%;
            line-height: 125%;
            margin-top: 10px;
            margin-left: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        h1 {
            font-size: 1.8em;
            margin-top: 10px;
            margin-left: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        h2 {
            font-size: 1.5em;
            margin-top: 10px;
            margin-left: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        h3 {
            font-size: 1.2em;
            margin-top: 10px;
            margin-left: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        p, ul, ol {
            font-size: 1.0em;
            margin-top: 10px;
            margin-left: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        ul li, ol li {
            list-style-position: inside;
            margin-top: 10px;
            margin-left: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        sup, sub {
            vertical-align: baseline;
            position: relative;
            top: -0.2em;
        }

        sub {
            top: 0.2em;
        }

        .large-button {
            color: #FFFFFF;
            background-color: #666666;
            border: none;
            border-bottom: 1px solid #666666;
            line-height: 125%;
            display: inline-block;
            width: 100%;
            margin: 0 auto;
            position: relative;
            font-style: normal;
            font-weight: bold;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 100%;
            outline: none;
            text-decoration: none;
            text-align: center;
            cursor: pointer;
            -webkit-border-radius: 2em;
            -moz-border-radius: 2em;
            border-radius: 2em;
        }
        </style>
    </head>
<body align="center" bgcolor="#666666" style="background-color: #666666; width: 100%; max-width: 600px;">

<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->

    <table id="body" align="center" bgcolor="FFFFFF" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px; border: 0px solid #999999; border-right: 0px solid #999999;border-left: 0px solid #999999; border-top: 0px solid #999999; border-bottom: 0px solid #999999;">
        <tr>
            <td class="container" align="center" valign="top" width="100%">
                <table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
                    <tr>
                        <td class="content" align="center" valign="top" width="100%">
                            <center><img src="https://www.vpcode.com/vfeimages/uploads/email/PureStorage_Email_Banner.png" alt="Pure Storage" style="height: auto !important; width: 100% !important;" class="header-image"/></center>
                        </td>
                    </tr>
                </table>
                <table border="0" cellpadding="0" cellspacing="10" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
                    <tr>
                        <td class="container-small" align="center" valign="top" width="50%">
                            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td class="content" align="left" valign="top">
                                    <img src="https://www.vpcode.com/vfeimages/uploads/email/Vivint_Virtual_Card.png" alt="Vivint Card" align="left" width="283" style="max-width: 283px;" class="column-image" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="content" align="left" valign="top">
                                        <p>Lorem ipsum dolor sit amet.</p>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td class="container-small" align="center" valign="top" width="50%">
                            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td class="content" align="left" valign="top">
                                        <p>Dear #FirstName#,</p>
                                        <p>Congratulations! $#DollarAmount# in reward money is available to load onto your Visa Prepaid Card! To accept your funding, simply click on the button below. Be sure to have your card handy.</p>
                                        <p><b>Reference Code:</b> #Promocode#</p>
                                        <p>#EmailMessage#</p>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>

                <table border="0" cellpadding="0" cellspacing="10" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
                    <tr>
                        <td align="center" valign="top" width="100%">
                            <table border="0" cellpadding="0" cellspacing="0" style="background-color: #FFFFFF; max-width: 600px; border-collapse: separate; border-radius: 2em;">
                                <tr>
                                    <td class="large-button" align="center" valign="middle" width="100%" style="color: #FFFFFF; font-family: Arial; font-size: 100%; font-weight: bold; line-height: 125%; padding: 10px; text-align: center;">
                                        <center><a href="#vpcodeurl#" title="Click Here" target="_blank" style="color: #FFFFFF; display: block; text-decoration: none; width: 100%;">Click Here to Access Your Reward</a></center>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td class="content" align="left" valign="top" width="100%">
                            <p>If you do not yet have a card, please hold onto this email. You will receive your card shortly and can accept your reward at that time.</p>
                            <p>If you need help, email <a href="mailto:service@prepaidcodecenter.com" title="Email Prepaid Code Center" target="_blank">service@prepaidcodecenter.com</a> or call Cardholder Services at 1-877-325-8444 during standard business hours.</p>    
                        </td>
                    </tr>
                    <tr>
                        <td class="content" align="center" valign="top" width="100%">
                            <center><p>Program issued by The Bancorp Bank, Member FDIC, pursuant to a license from Visa U.S.A. Inc.</p></center>
                        </td>
                    </tr>
                </table>

            </td>
        </tr>
    </table>

<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->

</body>
</html>

最佳答案

问题出在这里:

    .container-small {
        display: block !important;
        width: 100% !important;
    }

只需删除上面的这两个属性。

下面的片段:

@media only screen and (min-device-width: 541px), screen and (min-width: 541px) {
            #body {
                width: 600px !important;
            }
        }

        @media only screen and (max-width: 480px) {
            #body {
                width: 100% !important;
            }

            .container {
                display: block !important;
                width: 100% !important;
            }

            .container-small {
                display: block !important;
                width: 100% !important;
            }

            .header-image {
                height: auto !important;
                max-width: 480px !important;
                width: 100% !important;
            }

            .column-image {
                height:auto !important;
                max-width: 283px !important;
                width: 100% !important;
            }

            .content {
                color: #000000;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 100% !important;
                font-weight: normal;
                line-height: 125% !important;
            }
        }

        .container {
            display: block!important;
            max-width: 600px!important;
            margin: 0 auto!important;
            clear: both!important;
        }

       /* REMOVE HERE
        .container-small {
            display: block !important;
            width: 100% !important;
        }
*/

        .header-image {
            height: auto !important;
            max-width: 600px !important;
            width: 100% !important;
        }

        .column-image {
            height: auto !important;
            max-width: 283px !important;
            width: 100% !important;
        }

        .content {
            max-width: 600px;
            margin: 0 auto;
            display: block;
        }

        .content table {
            width: 100%;
        }

        * {
            padding: 0;
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 100%;
            line-height: 125%;
        }

        img {
            -ms-interpolation-mode: bicubic;
        }

        a {
            color: #EC6129;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 100%;
            font-weight: bold;
            line-height: 125%;
            text-decoration: none;
        }

        .ExternalClass {
            width: 100%;
        }

        .ExternalClass,
        .ExternalClass p,
        .ExternalClass span,
        .ExternalClass font,
        .ExternalClass td,
        .ExternalClass div {
            line-height: 100%;
        }

        .msoFix {
            mso-table-lspace:-1pt;
            mso-table-rspace:-1pt;
        }

        .service-text {
            text-align: center;
        }

        .service-text p {
            text-align: left
        }

        .last {
            margin-bottom: 0px;
        }

        .first {
            margin-top: 0px;
        }

        body, .body {
            -webkit-font-smoothing: antialiased;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            width: 100% !important;
            height: 100%;
            display: block;
            max-width: 600px;
            margin: 0 auto;
            margin-top: 20px;
            background-color: #999999;
            color: #000000;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: normal;
            font-size: 100%;
            line-height: 125%;
        }

        h1, h2, h3 {
            color: #000000;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bold;
            font-size: 100%;
            line-height: 125%;
            margin-top: 10px;
            margin-left: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        h1 {
            font-size: 1.8em;
            margin-top: 10px;
            margin-left: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        h2 {
            font-size: 1.5em;
            margin-top: 10px;
            margin-left: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        h3 {
            font-size: 1.2em;
            margin-top: 10px;
            margin-left: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        p, ul, ol {
            font-size: 1.0em;
            margin-top: 10px;
            margin-left: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        ul li, ol li {
            list-style-position: inside;
            margin-top: 10px;
            margin-left: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        sup, sub {
            vertical-align: baseline;
            position: relative;
            top: -0.2em;
        }

        sub {
            top: 0.2em;
        }

        .large-button {
            color: #FFFFFF;
            background-color: #666666;
            border: none;
            border-bottom: 1px solid #666666;
            line-height: 125%;
            display: inline-block;
            width: 100%;
            margin: 0 auto;
            position: relative;
            font-style: normal;
            font-weight: bold;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 100%;
            outline: none;
            text-decoration: none;
            text-align: center;
            cursor: pointer;
            -webkit-border-radius: 2em;
            -moz-border-radius: 2em;
            border-radius: 2em;
        }
<body align="center" bgcolor="#666666" style="background-color: #666666; width: 100%; max-width: 600px;">

  <!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->

  <table id="body" align="center" bgcolor="FFFFFF" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px; border: 0px solid #999999; border-right: 0px solid #999999;border-left: 0px solid #999999; border-top: 0px solid #999999; border-bottom: 0px solid #999999;">
    <tr>
      <td class="container" align="center" valign="top" width="100%">
        <table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
          <tr>
            <td class="content" align="center" valign="top" width="100%">
              <center>
                <img src="https://www.vpcode.com/vfeimages/uploads/email/PureStorage_Email_Banner.png" alt="Pure Storage" style="height: auto !important; width: 100% !important;" class="header-image" />
              </center>
            </td>
          </tr>
        </table>
        <table border="0" cellpadding="0" cellspacing="10" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
          <tr>
            <td class="container-small" align="center" valign="top" width="50%">
              <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                  <td class="content" align="left" valign="top">
                    <img src="https://www.vpcode.com/vfeimages/uploads/email/Vivint_Virtual_Card.png" alt="Vivint Card" align="left" width="283" style="max-width: 283px;" class="column-image" />
                  </td>
                </tr>
                <tr>
                  <td class="content" align="left" valign="top">
                    <p>Lorem ipsum dolor sit amet.</p>
                  </td>
                </tr>
              </table>
            </td>
            <td class="container-small" align="center" valign="top" width="50%">
              <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                  <td class="content" align="left" valign="top">
                    <p>Dear #FirstName#,</p>
                    <p>Congratulations! $#DollarAmount# in reward money is available to load onto your Visa Prepaid Card! To accept your funding, simply click on the button below. Be sure to have your card handy.</p>
                    <p><b>Reference Code:</b> #Promocode#</p>
                    <p>#EmailMessage#</p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>

        <table border="0" cellpadding="0" cellspacing="10" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
          <tr>
            <td align="center" valign="top" width="100%">
              <table border="0" cellpadding="0" cellspacing="0" style="background-color: #FFFFFF; max-width: 600px; border-collapse: separate; border-radius: 2em;">
                <tr>
                  <td class="large-button" align="center" valign="middle" width="100%" style="color: #FFFFFF; font-family: Arial; font-size: 100%; font-weight: bold; line-height: 125%; padding: 10px; text-align: center;">
                    <center><a href="#vpcodeurl#" title="Click Here" target="_blank" style="color: #FFFFFF; display: block; text-decoration: none; width: 100%;">Click Here to Access Your Reward</a>
                    </center>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td class="content" align="left" valign="top" width="100%">
              <p>If you do not yet have a card, please hold onto this email. You will receive your card shortly and can accept your reward at that time.</p>
              <p>If you need help, email <a href="mailto:service@prepaidcodecenter.com" title="Email Prepaid Code Center" target="_blank">service@prepaidcodecenter.com</a> or call Cardholder Services at 1-877-325-8444 during standard business hours.</p>
            </td>
          </tr>
          <tr>
            <td class="content" align="center" valign="top" width="100%">
              <center>
                <p>Program issued by The Bancorp Bank, Member FDIC, pursuant to a license from Visa U.S.A. Inc.</p>
              </center>
            </td>
          </tr>
        </table>

      </td>
    </tr>
  </table>

  <!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>

关于html - 不会并排放置表格的流畅的两列表格布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28704091/

上一篇：css - 在 .net 中动态更改 less 变量

下一篇：css - 白色条现在出现在我的动画渐变背景下方

相关文章：

spring - 收到来自 SMTP 主机 : smtp. yandex.ru、端口 : 465, 的错误问候响应:[EOF]] 与根本原因 Yandex

PHPMailer 和样式表格式化

javascript - C# Web 浏览器支持 javascript 文件 API

html - 如何在文本周围制作一个圆圈，圆圈面积尽可能小？

css - 如何在页面中使用全宽的 Wordpress 添加视频

html - 是否有用于 html/css 验证的 IE 插件？

ios - 我怎样才能重新加载 View iOS swift，MFMailComposeViewController

html - 属性中的 CSS 通配符

javascript - kineticjs 文本溢出行为

javascript - 无法读取未定义的属性 'className'

©2024 IT工具网  联系我们