时事通讯 HTML、div 和 Outlook答案

【问题标题】：Newsletter HTML, div's and Outlook时事通讯 HTML、div 和 Outlook
【发布时间】：2017-02-26 03:11:16
【问题描述】：

我正在使用 MailChimp 服务编写新邮件。

你可以整合一些代码，所以我用 div 制作了一个“表格”，我想要一个在左边，一个在右边。

问题是在服务的微程序中它可以工作，但是当我通过邮件发送它时（公司有 Outlook 2010），它把左边的 div 放在第一个上面，右边的 div 在第一个下面。有人可以帮帮我吗？

这是我的代码：

 <div style="background-color: rgb(214, 196, 0);width: 100%;margin-bottom: auto;overflow: hidden;">
        <div style="float: left;width: 50%;">
            <h1 style="color: rgb(67, 153, 186); background-color: rgb(214, 196, 0);">Offerten</h1>
            <h2 style="h2 {font-weight: bold;}">Akustik / Lärm:</h2>
            <p style="background-color: rgba(255, 255, 255, 0.2)">
P16368: Anfrage des ASTRA für ein Detailprojekt Lärm (Einbau Schallschutzfenster) im Raum Lyssach
            
            <h2>Bauphysik:</h2>
            <p style="background-color: rgba(255, 255, 255, 0.2)">
P16360: Neubau Turnhalle Minergie-P zertifiziert und Erweiterung Schule Plänke in Biel
P16361: energetische und akustische Begleitung bei der Sanierung und Neubaus Mehrgene-rationenhaus in Zollikofen
P16364: Neubau Wohnüberbauung Lohngasse in Bellmund
            </p>
            <h2>Brandschutz:</h2>
            <p style="background-color: rgba(255, 255, 255, 0.2)">
P16251.BR: Das Verfahren für die Vergabe der Marktüberwachungstätigkeit von Brandmeldern wurde vom BBL gestoppt. Das Pflichtenheft wird überarbeiten und wir werden neu eingeladen einzugeben.
Voraussichtlich ab Mitte Oktober 2016
            </p>
            <h2>UVB:</h2>
            <p style="background-color: rgba(255, 255, 255, 0.2)">
P16335: Umbau Bhf Leissigen – Projekt der BLS
            </p>
            <h2>Beweissicherung:</h2>
            <p style="background-color: rgba(255, 255, 255, 0.2)">
P16343: Rissaufnahmen von 10 Gebäuden inkl. Erschütterungsüberwachung in Bellach
            </p>
            <h1 style="color: rgb(67, 153, 186); background-color: rgb(214, 196, 0);">Projekte</h1>
            <h2>AS:</h2>
            <p style="background-color: rgba(255, 255, 255, 0.2)">
P16365: Durchführen von Sicherheitsaudits den für Wohnpark „Jardin du paradis“ in Biel (Implenia).
 
P14259: Wir wurden von der Baloise mit der Weiterführung der Logistik-Sicherheit-Verkehr-Entsendegesetz Beratung für das Projekt Baloise Park beauftragt. Dies ist ein Grossauftrag und dauert bis Mitte 2020.
Siehe dazu: https://www.baloisepark.ch/de/home.html
            </p>
            <h2>Bauphysik:</h2>
            <p style="background-color: rgba(255, 255, 255, 0.2)">
            P16298: Neubau Data Center in Biel, akustische Beratung ab Ausschreibungsphase.
P16299: Umbau, Erweiterung und Neubau Schulanlage Rüegsauschachen. Bauphysikalische und akustische Beratung.

            </p>
            <h2>Brandschutz</h2>
            <p style="background-color: rgba(255, 255, 255, 0.2)">
Erarbeitung eines Workshops für Architekten zu Grundlagen im Brandschutz. Schwerpunkte: Entfluchtung, Brandabschnitte sowie Qualitätssicherungsmassnahmen gemäss VKF 2015. Voraussichtliche Durchführung bei Architekturbüros in Biel/Bienne ab Januar 2017
 
P16013: Ergänzung der Beratung bei Teilprojekten der Arealentwicklung Elsässerstrasse in Basel.
 
P16233 Erstellung eines EX -(Explosionsschutz) Gutachtens des neuen Forschungs- und Dienstleitungsgebäudes von sitem insel (Insel Spital, Bern).
            </p>
            <h2>Natürliche Lebensräume:</h2>
            <p style="background-color: rgba(255, 255, 255, 0.2)">
P1632: Unterstützung Umweltbericht MOB, Erster Auftrag in Biel in diesem Fachbereich!
            </p>
        </div>
        <div style="position: relative; float: right;width: 50%;}">
            <h1 style="color: rgb(67, 153, 186); background-color: rgb(214, 196, 0);">Offres</h1>
            <h2>Sols:</h2>
            <p style="background-color: rgba(255, 255, 255, 0.2)">
P16351 : Expertise Sols-SDA Treycovagnes
P16352 : Suivi pédologique de chantier pour la réfection d’infrastructures agricoles à Valbroye
P16357 : Suivi pédologique de chantier pour la construction d’une nouvelle Landi à Cossonay
P16373 : Expertise Sols-SDA à Chamblon
P16375 : Expertise Sols-SDA à Pomy
            </p>
            
            <h1 style="color: rgb(67, 153, 186); background-color: rgb(214, 196, 0);">Projets</h1>
            <h2>Sols:</h2>
            <p style="background-color: rgba(255, 255, 255, 0.2)">
P16351: Expertise Sols-SDA Treycovagnes
            </p>
            <h2>Bruit:</h2>
            <p style="background-color: rgba(255, 255, 255, 0.2)">
P16366 : Bruit de chantier 24h/24 – STEP Lausanne
P16337 : Bruit de ventilation intérieure – HEIG-VD
P16339 : Bruit Routier – Valangin - Routes Cantonales
P15185 : Exposition publique Gabarit sonore éolien
            </p>
        </div>
    </div>

有一些截图：

【问题讨论】：

不要使用 div ，而是使用 table 标签作为您的时事通讯。并在您的代码中使用tds。比如左侧内容一个td，右侧内容另一个td，根据你的需要将width给td。
您需要像 1995 年一样编写代码，仅使用表格来构建内容。 divs 不仅在 Outlook 中，将在所有地方崩溃。您需要在每个主要浏览器（Chrome、Firefox、所有版本的 IE）中测试每个邮件客户端（Outlook、Thunderbird、Windows Mail、Apple Mail 等）和每个主要浏览器客户端（Hotmail、Yahoo、Gmail、Aol）中的模板) 以确保它不会在其中一个中中断和奇怪地显示，因为它们都显示 HTML 电子邮件略有不同。欢迎来到电子邮件模板地狱。
这很好地概述了问题campaignmonitor.com/dev-resources/guides/coding
这是一个不错的样板，可以帮助您入门github.com/seanpowell/Email-Boilerplate
您必须使用传统方法，例如仅使用 table 和 inline-css。某些电子邮件引擎不会呈现外部 CSS 或第三方库。有关更多指南，您可以访问此处：campaignmonitor.com/css

标签： html css mailchimp newsletter

【解决方案1】：

使用 align="left" 或 align="right" 而不是浮动。大多数电子邮件客户端不支持浮动。

我还建议使用像素宽度。比百分比宽度更可靠。 Outlooks 在并排的桌子之间增加了大约 20 像素的间隙。因此，如果您需要使用百分比宽度，请记住这一点。可能需要您降低百分比，因此每个百分比降低 45%。

【讨论】：