时事通讯在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&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&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&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ø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&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&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&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&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
,或更好(完全覆盖),使用本机表元素,tr
和td
而不是display: table-row
等。
以上是关于时事通讯在Outlook中看起来不好,元素不对齐的主要内容,如果未能解决你的问题,请参考以下文章
在 Mandrill 中,向所有订阅者发送个性化时事通讯是一种不好的做法吗?