Dans le courriel HTML outlook, float ne fonctionne pas

très tard dans la conversation, mais voici comment "flotter" dans le courriel html en utilisant align="" à la place.

exemple ici

aussi, si vous êtes à la recherche de ressources sur le courriel html (je suppose que vous êtes comme la réponse que vous avez marqué correct est très générale), voici un énorme liste de ressources .

C'est vraiment un très bon guide de Mail Chimp sur le Codage HTML des e-Mails:

http://kb.mailchimp.com/article/how-to-code-html-emails

quelques conseils de base:

• utiliser les tableaux pour la mise en page.
• Réglez votre table la plus large pour un maximum de 600px de large.
• N'essayez pas de les utiliser Flash ou JavaScript
• N'utilisez pas CSS dans un style marquez comme certains clients de courrier le rejetteront.
• utiliser les styles css en ligne seulement.

coder vos e-mails comme si c'était à peu près 2003.

CampaignMonitor fournir ce guide génial à tous les CSS de soutien, à travers de multiples clients de messagerie, qui est également disponible comme un pdf ou xls de téléchargement.

comme les réponses ci-dessus le disent, le support email pour CSS est très limité, principalement en raison de Microsoft descision d'utiliser Word comme son moteur de rendu html .

check out https://www.campaignmonitor.com/css / ici, il a énuméré ce qui sont toutes les choses prises en charge et non pris en charge dans l'e-mail

au lieu de flotter vous pouvez utiliser une table extérieure et mettre le contenu que vous voulez flotter à gauche dans le td gauche de la table extérieure.

ce n'est pas une réponse élégante mais je l'ai fait de cette façon

j'ai trouvé un moyen d'appliquer float sur Outlook.com.

Just capitaliser L'étiquette comme flotteur:gauche .

<span style="Float:left;">Content to float</span>

peut-être que tu devrais utiliser !important aussi;

Je l'ai testé et ça a fonctionné.

de simples images flottantes peuvent ressembler à

<img src="yourimage" align="left" />

mais de cette façon vous n'obtiendrez pas de résultats solides avec le remplissage entre le texte et l'image, outlook supprime la marge et le remplissage et votre texte collera juste à côté de l'image. Essayez donc ceci:

<div style="text-align:justify;">

...a lot of text here untill you want to insert an image that floats left...

    <table cellpadding="0" cellspacing="0" align="left" style="float: left;">
        <tr>
            <td>
                <img src="yourimage" align="left" vspace="4" />
            </td>
            <td width="15">&nbsp;</td>
        </tr>
    </table>

...a lot more text here until you need an image that floats right...

    <table cellpadding="0" cellspacing="0" align="right" style="float: right;">
        <tr>
            <td width="15">&nbsp;</td>
            <td>
                <img src="yourimage" align="left" vspace="4" />
            </td>
        </tr>
    </table>

... a lot more text here...

</div>

vous devez envelopper un élément 'table' autour de lui pour obtenir l'effet de marge de remplissage de travailler dans Gmail, Outlook (en ligne), Microsoft Outlook (client de bureau),...

donner le tableau un attribut align=left ou right. (Éditer la réponse ici: en plus et de repli pour d'autres clients de messagerie donnent aussi à la table une valeur de flottant alors faites les deux. Ce sont des renforts l'un pour l'autre. Certains clients comprennent "float", d'autres comprennent" align", d'autres comprennent les deux...) Votre table va flotter dans le texte, presque comme une image. La seule différence est que dans outlook une table génère un saut de ligne automatique dans le texte où une image alignée à gauche ou à droite ne génère pas de sauts.

pour le réglage de la marge, puisque nous travaillons maintenant avec une table, ajouter un" td"supplémentaire avec une largeur=" 15 " à la gauche ou à droite de votre cellule image et un non-rupture-espace dans elle. (ou un transparent GIF -> spacer.gif)

 

vous feriez mieux de ne pas laisser les cellules vides parce que sinon la largeur de votre cellule ne sera pas respectée dans certains clients de messagerie

pour les marges supérieure et inférieure, nous pouvons utiliser l'attribut 'vspace', n'oubliez pas pour donner à l'image un attribut align = left ou right. Sinon, le 'vspace' ne fonctionnera pas.

quand vous êtes flottant quelque chose à la droite de quelque chose l'élément flottant droit devrait toujours apparaître en premier dans le code. Comme ceci:

<div style="width: 100%;border-style:solid;overflow: hidden;">
    <img src="someImage"  style="float: right;"/>
    <h3> Your appointment Details</h3>
</div>