Question

这是除Outlook中其他地方的外观：

在Outlook中，它看起来像这样：

三个表用于创建2列设计，这是代码：

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

.ReadMsgBody {
  width: 100%;
  background-color: #ffffff;
}

.ExternalClass {
  width: 100%;
  background-color: #ffffff;
}

.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
  line-height: 100%;
}

html { width: 100%; }

body {
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none;
  margin: 0;
  padding: 0;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

table td { border-collapse: collapse; }
.yshortcuts a { border-bottom: none !important; }
img { display: block !important; }

a {
  text-decoration: none;
  color: #e54a39;
}


/* Media Queries */

@media only screen and (max-width: 640px) {
  body { width: auto !important; }
  table[class="table600"] { width: 450px !important; }
  table[class="table-container"] { width: 90% !important; }
  
  table[class="container2-2"] {
    width: 47% !important;
    text-align: left !important;
  }
  
  table[class="full-width"] {
    width: 100% !important;
    text-align: center !important;
  }
  
  img[class="img-full"] {
    width: 100% !important;
    height: auto !important;
  }
}

@media only screen and (max-width: 479px) {
  body { width: auto !important; }
  table[class="table600"] { width: 290px !important; }
  table[class="table-container"] { width: 82% !important; }
  
  table[class="container2-2"] {
    width: 100% !important;
    text-align: left !important;
  }
  
  table[class="full-width"] {
    width: 100% !important;
    text-align: center !important;
  }
  
  img[class="img-full"] { width: 100% !important; }
}

<!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">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
    <title>Test</title>
</head>

<body marginwidth="0" marginheight="0" style="margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;" offset="0" topmargin="0" leftmargin="0">

    <!-- PREFOOTER -->
    <table width="100%">
        <tr>
            <td align="center" bgcolor="orange">
                <table class="table600" width="600">
                    <tr>
                        <td>
                            <table class="full-width" width="287" align="left">
                                <tr>
                                    <td align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                                        Why do I get this mail?
                                    </td>
                                </tr>
                            </table>

                            <!-- SPACE -->
                            <table class="full-width" width="1" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                                <tr>
                                    <td width="1" height="30" style="font-size: 30px; line-height: 30px;"></td>
                                </tr>
                            </table>
                            <!-- END SPACE -->

                            <table class="full-width" width="287" align="right">
                                <tr>
                                    <td align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                                        Contact Us
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <!-- END PREFOOTER -->

</body>

</html>

我已经发现问题是由以下原因引起的：

 <!-- SPACE -->
 <table class="full-width" width="1" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
      <tr>
           <td width="1" height="30" style="font-size: 30px; line-height: 30px;"></td>
      </tr>
 </table>
 <!-- END SPACE -->

但是我不明白为什么。我该如何更换垫片以使其在Outlook中工作，但又要保留空间？

Answer 1

回答有关间距的后续操作。只需在padding上使用td，便可以很好地支持填充，并且效果很好。

<table class="table600" width="600">
  <tr>
    <td style="padding-bottom: 30px;">

然后，您还可以使用媒体查询中的类来调整该填充。

还有一个注意事项：您不再需要为CSS使用属性CSS选择器。这是一个老错误，现已修复。因此，您可以自由使用标准的.class选择器。

Outlook：表格左对齐问题

1 个答案: