Question

电子邮件时事通讯看起来不错，除了他们希望消除各列之间的间距，使左侧区域碰到右侧区域。我的间距为0，但其左列到右列仍然分开。他们希望将三行分开，但不要从左到右。有什么办法做到这一点？

我更改的任何间距只会影响元素之间的上下移动，而不会左右。

td {
font-family: Lato, Arial, Helvetica, sans-serif !important;
}
#applecenter {
    margin:auto;
    max-width:690px;
}
table, td {
    border-collapse: collapse;
}
a {
    color:#0D47A1;
    text-decoration:none;
}
a:visited {
    text-decoration:none;
}
hr {
    display:none;
    visibility:hidden;
}
@media screen and (max-width: 693px) {
#background {
    padding:0 !important;
}
table, td {
    width:auto !important;
}
ul {
    margin:19px 0 19px 10px !important;
}
#hero img, #narrow, #preheader {
    width:95% !important;
}
#applecenter {
    padding:10px 0;
}
#col1 {
    float:left !important;
    padding:20px !important;
}
#col2 {
    float:left !important;
    padding:0 0 10px !important;
    text-align:center !important;
}
#col2 div {
    display:inline-block;
    padding:0 10px;
}
#col2 table {
    width:200px !important;
}
#cta {
    width:90% !important;
}
.goaway {
    display:none;
}
.stack {
    display:block;
}
.hero {
    margin: 10px 0 0;
}
}

     <!doctype html>
<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 charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

<!--<![endif]-->
<title>
Blueberry Template
</title>

<!--[if mso]>
<style>
#cta td {padding:20px;}
</style>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body style="background:#E0E0E0; margin:0; font-family:Lato, Arial, Helvetica, sans-serif; font-size:16px; color:#212121;mso-line-height-rule:exactly;">
    <table cellpadding="0" cellspacing="0" border="0" style="width:100%;">
    <tr>
    <td id="background" style="padding:20px; background:#E0E0E0;">
        <div id="applecenter">
            <table id="preheader" cellpadding="0" cellspacing="0" border="0" align="center" style="width:650px; margin:auto;">
            <tr>
                <td style="font-family:Arial, Helvetica, sans-serif; font-size:12px; padding-bottom:5px;">Use this area as a secondary subject line.</td>
            </tr>
            </table>
            <table cellpadding="0" cellspacing="0" border="0" align="center" style="width:690px; margin:auto;">
            <tr>
                <td id="hero" style="text-align:center; padding:0 0 10px;"><img style="width:650px; display:block; border:0; margin:auto;" src="http://emissourian.com/app/images/MedShoppe-Hero.jpg"></td>
            </tr>
            <tr>
                <td style="padding:0 10px 10px;"><table cellpadding="0" cellspacing="0" border="0" align="center" style="width:650px;">
                    <tr>
                        <td valign="middle" class="stack" style="padding:10px; background:#2196F3;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td valign="middle" style="line-height:125%; font-size:16px; font-family:Arial, Helvetica, sans-serif; color:#ffffff; padding:10px; text-align:center;"><h1 style="margin:0; font-size:24px; line-height:100%;">- The myth of Diabetes - <br>How to get the genie back in the bottle <br><br>With 1 in 3 being <br>diabetic or pre-diabetic <br> let’s turn diabetes around together! </h1>
                            <p style="margin:0; text-align:center;"><br>

                            </p>

            <a style="color:#ffffff;" href="tel:1-636-629-2022"><strong>Call To RSVP 636-629-2022</strong></a></td>
    </tr>
</table></td>
                        <td class="goaway" style="width:10px; text-align:center;">&nbsp;</td>
                        <td valign="top" class="stack hero" style="width:300px; text-align:center;  background:#BBDEFB; padding:10px; vertical-align:top;"><img src="http://emissourian.com/app/images/MedShoppe-Body1.jpeg" alt="" style="width:100%; display:inline; border:0;">
                            <p style="margin:5px 0;"></p></td>
                        </tr>
                    </table></td>

Answer 1

删除未使用的最后5行

<td class="goaway" style="width:10px; text-align:center;">&nbsp;</td>

删除列之间的间距/填充

1 个答案: