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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了时事通讯在Outlook中看起来不好,元素不对齐相关的知识,希望对你有一定的参考价值。

我正在为客户设计新闻稿,但我无法在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>

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

答案

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

使用display: table-cell,或更好(完全覆盖),使用本机表元素,trtd而不是display: table-row等。

以上是关于时事通讯在Outlook中看起来不好,元素不对齐的主要内容,如果未能解决你的问题,请参考以下文章

我的表格在发送后立即对齐(时事通讯的 HTML 电子邮件)

如何在 Outlook 中的时事通讯上制作背景图片?

在 Mandrill 中,向所有订阅者发送个性化时事通讯是一种不好的做法吗?

iPad Gmail 帐户时事通讯中的空白间隙

时事通讯无法隐藏 gmail 上的响应内容以及当我尝试转发电子邮件时

类时事通讯不存在(mailchimp 时事通讯):laravel