我是一个使用HTML和CSS的新手（所以请对我很轻松），并且我的三个偶数列很难。它们垂直堆叠而不是水平堆叠。我有一个媒体查询，以便他们堆叠400像素宽（电子邮件目前建立在600像素宽）。
我已经完成了类似主题的研究，但其中一些仍然在我的脑海中。我不相信我在使用BootStraps CSS。有人会介意看看吗？
这是HTML：
<!-- Start 3 Even Columns -->
<div class="container section">
<p><img src="https://cdn2.hubspot.net/hubfs/434319/GDPR%20-%20Opt%20In/Flat_Newspaper_100px.png" style="max-width: 100px; margin: 0px auto; display: block;"></p>
</div>
<div class="container section">
<p><img src="https://cdn2.hubspot.net/hubfs/434319/GDPR%20-%20Opt%20In/Packaging_NewProduct_FlatIcon_100px.png" style="max-width: 100px; margin: 0px auto; display: block;"></p>
</div>
<div class="container section">
<p><img src="https://cdn2.hubspot.net/hubfs/434319/GDPR%20-%20Opt%20In/Megahorn_100px.png" style="max-width: 100px; margin: 0px auto; display: block;"></p>
</div>
<!-- End 3 Even Columns -->
这是我引用的CSS（这是在HubSpot中构建的）：
/* Three Even Columns */
.container:after { /*clear float*/
content: "";
display: table;
clear: both;
}
.section {
float: left;
width: 33.3333%;
border: 1px solid;
box-sizing: border-box;
}
@media (max-width: 400px) { /*breakpoint*/
.section {
float: none;
width: auto;
}
}
编辑：好的，我已经尝试根据您的反馈格式化列（硬编码，而不是Bootstraps，因为HubSpot剥离了大量的.css），我相信一些父元素会覆盖它。我已经包含了电子邮件中的所有代码。知道什么父元素可能导致这个？
<div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: Open Sans, Century Gothic, CenturyGothic, Geneva, AppleGothic, sans-serif; max-height: 0px; max-width: 700px; opacity: 0; overflow: hidden;">Lorem ipsum dolor que ist</div>
<table style="width: 100.038%;" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="mobile-padding" style="background: #ffffff url('bg.jpg') repeat scroll 0% 0% / cover; width: 100%;" valign="top" bgcolor="#7b7573" align="center"><!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table style="max-width: 600px;" width="100%" cellspacing="0" border="0" align="center">
<tbody>
<tr style="height: 129px;">
<td style="padding: 0px; height: 129px;" valign="center" align="center">
<h1 style="font-size: 40px; color: #7b7573; font-family: 'Century Gothic', CenturyGothic, Geneva, AppleGothic, sans-serif; font-style: light; letter-spacing: 8px;">HEAD TEXT HERE</h1>
</td>
</tr>
<tr style="height: 50.25px;">
<td style="padding: 20px 20px 20px 20px; height: 50.25px;" valign="top" align="center"><img src="https://cdn2.hubspot.net/hubfs/434319/GDPR%20-%20Opt%20In/Artboard%201.png" alt="GDPR - Data Stock Image" style="width: 600px; max-width: 600px;" width="600" height="400"></td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
<tr>
<td style="padding: 0px 0px 25px; font-family: Open\ Sans, Helvetica, Arial, sans-serif; width: 100%;" valign="top" align="center">
<table style="max-width: 600px; width: 730.617px;" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="font-family: 'Century Gothic', CenturyGothic, Geneva, AppleGothic\ sans-serif; font-size: 14px; padding: 10px; line-height: 25px; width: 863.617px;" align="center">
<p>text text text text text text</p>
<p>text text text text text text:</p>
<!-- Start 3 Even Columns -->
<div class="containersectionI">
<p><img src="https://cdn2.hubspot.net/hubfs/434319/GDPR%20-%20Opt%20In/Flat_Newspaper_100px.png" style="max-width: 100px; margin: 0px auto; display: block;"></p>
</div>
<div class="containersectionII">
<p><img src="https://cdn2.hubspot.net/hubfs/434319/GDPR%20-%20Opt%20In/Packaging_NewProduct_FlatIcon_100px.png" style="max-width: 100px; margin: 0px auto; display: block;"></p>
</div>
<div class="containersectionIII">
<p><img src="https://cdn2.hubspot.net/hubfs/434319/GDPR%20-%20Opt%20In/Megahorn_100px.png" style="max-width: 100px; margin: 0px auto; display: block;"></p>
</div>
<!-- End 3 Even Columns --> <!-- end HubSpot Call-to-Action Code -->
<p> </p>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td style="border-radius: 0px 0px 3px 3px; padding: 25px; width: 863.617px;" bgcolor="#ffffff" align="center"> </td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--> <!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table style="max-width: 600px;" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td style="padding: 0 0 5px 0;" valign="top" align="center"><img src="litmus-wheel-grey.png" style="display: block;" width="35" height="35" border="0"></td>
</tr>
<tr>
<td style="padding: 0; font-family: 'Century Gothic', CenturyGothic, Geneva, AppleGothic, sans-serif; color: #999999;" valign="top" align="center">
<p style="font-size: 14px; line-height: 20px;">6text text text text text text<br> text text text text text text <br><br> <a href="http://litmus.com" style="color: #999999;" target="_blank">View Online</a> • <a href="http://litmus.com" style="color: #999999;" target="_blank">Unsubscribe</a></p>
</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
<div> </div>
</td>
</tr>
</tbody>
</table>
答案 0 :(得分：0)
将以下属性添加到其中：
div.containersectionI{
position: absolute;
left: 0px;
top: 0px;
}
div.containersectionII{
position: absolute;
left: 135px;
top: 0px;
}
div.containersectionIII{
position: absolute;
left: 260px;
top: 0px;
}<div class="containersectionI"><p><img src="https://cdn2.hubspot.net/hubfs/434319/GDPR%20-%20Opt%20In/Flat_Newspaper_100px.png" style="max-width: 100px; margin: 0px auto; display: block;"></p>
</div>
<div class="containersectionII"><p><img src="https://cdn2.hubspot.net/hubfs/434319/GDPR%20-%20Opt%20In/Packaging_NewProduct_FlatIcon_100px.png" style="max-width: 100px; margin: 0px auto; display: block;"></p>
</div>
<div class="containersectionIII"><p><img src="https://cdn2.hubspot.net/hubfs/434319/GDPR%20-%20Opt%20In/Megahorn_100px.png" style="max-width: 100px; margin: 0px auto; display: block;"></p>
</div>
希望有所帮助：）
编辑：这可能会使用!important，或许可以吗？
div.containersectionI{
position: absolute !important;
left: 0px !important;
top: 0px !important;
}
div.containersectionII{
position: absolute !important;
left: 135px !important;
top: 0px !important;
}
div.containersectionIII{
position: absolute !important;
left: 260px !important;
top: 0px !important;
} <div class="containersectionI"><p><img src="https://cdn2.hubspot.net/hubfs/434319/GDPR%20-%20Opt%20In/Flat_Newspaper_100px.png" style="max-width: 100px; margin: 0px auto; display: block;"></p>
</div>
<div class="containersectionII"><p><img src="https://cdn2.hubspot.net/hubfs/434319/GDPR%20-%20Opt%20In/Packaging_NewProduct_FlatIcon_100px.png" style="max-width: 100px; margin: 0px auto; display: block;"></p>
</div>
<div class="containersectionIII"><p><img src="https://cdn2.hubspot.net/hubfs/434319/GDPR%20-%20Opt%20In/Megahorn_100px.png" style="max-width: 100px; margin: 0px auto; display: block;"></p>
</div>
我知道大多数网站都说!important几乎覆盖了所有内容，不建议使用它，但在绝望的情况下（类似），你可以使用它。
希望它再次有用：）
答案 1 :(得分：0)
您可以使用Bootstrap轻松完成列。你只需要像这样模式化你的html标签：
<div class="container">
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
</div>
</div>
我做了一个仅使用bootstrap来获得3个偶数列的插件供您参考： https://embed.plnkr.co/TisOnM9Lb1ZmonleBKN3/