时事通讯在Outlook中看起来不好，元素不对齐

Question

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

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

这是我在简报中放入MailChimp代码块的代码：

<style type="text/css">@media screen and (max-width:480px)
{
div{font-size:12px}
a.single{line-height:2.25em;display:block}
a.double{line-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" height="100" src="https://gallery.mailchimp.com/32e5243136b10b277aba1e9d2/images/9f1c92ca-7906-4383-8317-5524960adfd3.png" style="border: 0px  ; width: 100%; height: 100%; margin: 0px;" width="100" /><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" height="100" src="https://gallery.mailchimp.com/32e5243136b10b277aba1e9d2/images/7ba4f938-8428-4320-be5b-10f4f0816eae.png" style="border: 0px  ; width: 100%; height: 100%; margin: 0px;" width="100" /><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" height="100" src="https://gallery.mailchimp.com/32e5243136b10b277aba1e9d2/images/7435cd65-9d37-4ed0-b43c-859647d72ae2.png" style="border: 0px  ; width: 100%; height: 100%; margin: 0px;" width="100" /><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" height="100" src="https://gallery.mailchimp.com/32e5243136b10b277aba1e9d2/images/760861f6-f4ff-4208-951d-a77c08b16393.png" style="border: 0px initial ; width: 100%; height: 100%; margin: 0px;" width="100" /><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" height="100" src="https://gallery.mailchimp.com/32e5243136b10b277aba1e9d2/images/7159316b-b896-41cd-b948-fcb4978c8aff.png" style="border: 0px; width: 100%; height: 100%; margin: 0px;" width="100" /><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" height="100" src="https://gallery.mailchimp.com/32e5243136b10b277aba1e9d2/images/9d64f34c-d304-4476-b733-bd7f0202b8c4.png" style="border: 0px  ; width: 100%; height: 100%; margin: 0px;" width="100" /><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" height="100" src="https://gallery.mailchimp.com/32e5243136b10b277aba1e9d2/images/2af88d8a-1c0b-421c-aa16-9d98bf5418c5.png" style="border: 0px  ; width: 100%; height: 100%; margin: 0px;" width="100" /><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" height="100" src="https://gallery.mailchimp.com/32e5243136b10b277aba1e9d2/images/eaff7670-1d95-4d87-b504-59e8e26cc82b.png" style="border: 0px  ; width: 100%; height: 100%; margin: 0px;" width="100" /><br />
Funfood</a></div>
</div>

我怎样才能解决这个问题？

Answer 1

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

使用display: table-cell，或更好（完全覆盖），使用本机表元素，tr和td而不是display: table-row等。