通讯在 Outlook 中看起来很糟糕，元素未对齐

Posted 2023-03-24

【中文标题】通讯在 Outlook 中看起来很糟糕，元素未对齐

【英文标题】：Newsletter looks bad in Outlook, elements not aligned

【发布时间】：2018-08-15 06:26:54

【问题描述】：

我正在为客户设计新闻稿，但无法让某些元素在 Outlook 中正确显示。它在 MailChimp 预览和我自己的 Windows 10 Mail 和 Outlook.com 收件箱中看起来不错，但是当我的客户端在 Outlook 中打开它时，它却没有。

主要问题是一组 div，每个 div 都包含一个图像和一些文本。它们应该排成两排，每排四排，但在 Outlook 中，它们都显示在彼此下方。

这是我在时事通讯中放入 MailChimps 代码块的代码：

<style type="text/css">@media screen and (max-width:480px)

divfont-size:12px
a.singleline-height:2.25em;display:block
a.doubleline-height:1.5em;display:block

</style>
<div style="display:table-row;">
<div style="float:left; display: block; text-align:center; vertical-align: top; width: 25%;"><a class="single" href="https://letlej.dk/store/?shop=category&amp;showcat=23"><img data-file-id="410427"  src="https://gallery.mailchimp.com/32e5243136b10b277aba1e9d2/images/9f1c92ca-7906-4383-8317-5524960adfd3.png" style="border: 0px  ; width: 100%; height: 100%; margin: 0px;"  /><br />
Hoppeborge</a></div>

<div style="float:left; display: block; text-align:center; vertical-align: top; width: 25%;"><a class="single" href="https://letlej.dk/store/?shop=category&amp;showcat=28"><img data-file-id="410419"  src="https://gallery.mailchimp.com/32e5243136b10b277aba1e9d2/images/7ba4f938-8428-4320-be5b-10f4f0816eae.png" style="border: 0px  ; width: 100%; height: 100%; margin: 0px;"  /><br />
RodeoTyre</a></div>

<div style="float:left; display: block; text-align:center; vertical-align: top; width: 25%;"><a class="double" style="display:block;"><img data-file-id="410407"  src="https://gallery.mailchimp.com/32e5243136b10b277aba1e9d2/images/7435cd65-9d37-4ed0-b43c-859647d72ae2.png" style="border: 0px  ; width: 100%; height: 100%; margin: 0px;"  /><br />
Sport og Action</a></div>

<div style="float:left; display: block; text-align:center; vertical-align: top; width: 25%;"><a class="single" href="https://letlej.dk/store/?shop=category&amp;showcat=33"><img data-file-id="410411"  src="https://gallery.mailchimp.com/32e5243136b10b277aba1e9d2/images/760861f6-f4ff-4208-951d-a77c08b16393.png" style="border: 0px initial ; width: 100%; height: 100%; margin: 0px;"  /><br />
Kraftpr&oslash;ver</a></div>
</div>

<div style="display:table-row;">
<div style="float:left; display: block; text-align:center; vertical-align: top; width: 25%;"><a class="double" href="https://letlej.dk/store/?shop=category&amp;showcat=44"><img data-file-id="410415"  src="https://gallery.mailchimp.com/32e5243136b10b277aba1e9d2/images/7159316b-b896-41cd-b948-fcb4978c8aff.png" style="border: 0px; width: 100%; height: 100%; margin: 0px;"  /><br />
Store aktiviteter</a></div>

<div style="float:left; display: block; text-align:center; vertical-align: top; width: 25%;"><a class="single" href="https://letlej.dk/store/?shop=category&amp;showcat=51"><img data-file-id="410435"  src="https://gallery.mailchimp.com/32e5243136b10b277aba1e9d2/images/9d64f34c-d304-4476-b733-bd7f0202b8c4.png" style="border: 0px  ; width: 100%; height: 100%; margin: 0px;"  /><br />
Jukebokse</a></div>

<div style="float:left; display: block; text-align:center; vertical-align: top; width: 25%;"><a class="single" href="https://letlej.dk/store/?shop=category&amp;showcat=53"><img data-file-id="410423"  src="https://gallery.mailchimp.com/32e5243136b10b277aba1e9d2/images/2af88d8a-1c0b-421c-aa16-9d98bf5418c5.png" style="border: 0px  ; width: 100%; height: 100%; margin: 0px;"  /><br />
Madvogne</a></div>

<div style="float:left; display: block; text-align:center; vertical-align: top; width: 25%;"><a class="single" href="https://letlej.dk/store/?shop=category&amp;showcat=69"><img data-file-id="410431"  src="https://gallery.mailchimp.com/32e5243136b10b277aba1e9d2/images/eaff7670-1d95-4d87-b504-59e8e26cc82b.png" style="border: 0px  ; width: 100%; height: 100%; margin: 0px;"  /><br />
Funfood</a></div>
</div>

我该如何解决这个问题？

【问题讨论】：

你可以使用 MJML。

你能告诉我们所有的代码，包括包装器吗？否则很难修复错误。

【参考方案1】：

浮动是问题，请参阅https://www.campaignmonitor.com/css/positioning-display/float/

使用display: table-cell，或更好的（用于全面覆盖），使用原生表格元素，tr 和td 而不是display: table-row 等。