Nell'e-mail html di Outlook, float non funziona

Question

Voglio questo layout dove ho una scatola rettangolare. E dentro la scatola sulla sinistra c'è un testo e sulla destra c'è un'immagine. Questo sembra buono nel browser, ma quando viene inviato come email html, in Outlook il float non sembra funzionare. Mette l'immagine nella riga successiva sotto il testo. Qualche idea su come farlo funzionare? (Sto cercando di evitare l'uso di tabelle.)

<div style="width: 100%;border-style:solid;overflow: hidden;"> 

    <span style="float: left;"> 
     <h3> Your appointment Details</h3> 
    </span> 
    <span style="float: right;"> 
     <img src="someImage"/> 
    </span> 

</div> 

Answer 1

Quando si tratta di rendere HTML, la maggior parte dei client di posta elettronica sono primitivi e si romperà un sacco di elementi HTML ben formati.

mi sento di raccomandare alcune risorse online come:

come codificare le email HTML: MailChimp

Questo SO discussione può essere utile:

What guidelines for HTML email design are there?

Answer 2

Questa è davvero una buona guida da Mail Chimp su Coding per email HTML:

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

alcuni suggerimenti di base:

• Utilizzare le tabelle per il layout.
• Imposta il tuo tavolo più largo con una larghezza massima di 600 px.
• Non provare e utilizzare JavaScript o Flash
• Non utilizzare CSS in un tag di stile poiché alcuni client di posta lo elimineranno.
• Utilizzare solo stili CSS incorporati.

codice Fondamentalmente le email come se fosse all'incirca 2003.

Answer 3

CampaignMonitor fornire this rather brilliant guide per tutto il supporto CSS su più client di posta elettronica, che è disponibile come un pdf o xls download.

Come indicato sopra, il supporto via email per CSS è molto limitato, principalmente a causa di Microsoft's descision to use Word as its html rendering engine.

Answer 4

Molto tardi per la conversazione, ma ecco come "fluttuare" nell'e-mail html utilizzando align="".

Example here

Inoltre, se siete alla ricerca di risorse su e-mail html (suppongo che voi siate come la risposta contrassegnato corretta è molto generale), ecco un huge list of resources.

Answer 5

check out https://www.campaignmonitor.com/css/ qui ha elencato ciò che sono supportate tutte le cose e non è supportato in email

Invece di galleggiante è possibile utilizzare una tabella esterna e mettere il contenuto che si desidera a galleggiare a sinistra in td sinistra della tabella esterna.

questa non è una risposta elegante, ma l'ho fatto in questo modo

Answer 6

Quando si sono galleggianti qualcosa alla destra di qualcosa l'elemento flottante destra dovrebbe allways apear prima nel codice. Come questo:

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

Answer 7

semplici immagini fluttuanti possono essere come

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

MA in questo modo non sarà possibile ottenere risultati solidi con imbottitura tra testo e immagine, Outlook rimuove margin e padding e il testo che si attacchi proprio accanto all'immagine. Quindi provare questo:

<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> 

È necessario avvolgere un elemento 'table' intorno ad esso per ottenere l'effetto padding-margine per lavorare in Gmail, Outlook (on-line), Microsoft Outlook (client desktop), ...

Assegna alla tabella un attributo align = left o right. (Modifica risposta qui: in aggiunta e fallback per altri client di posta elettronica danno anche alla tabella un valore float, quindi esegui entrambi. Sono back-up tra loro.Alcuni client capiscono "float", altri capiscono "align", alcuni capiscono entrambi, ...) La tua tabella fluttuerà nel testo quasi come fa un'immagine. L'unica differenza è che in Outlook una tabella genera un'interruzione di riga automatica nel testo in cui un'immagine con allineamento a sinistra o a destra non genera interruzioni.

Per impostare il margine, dato che ora stiamo lavorando con una tabella, aggiungere un "td" in più con una larghezza = "15" a sinistra oa destra della cella dell'immagine e uno spazio di interruzione in esso. (O un GIF trasparente -> spacer.gif)

  

Faresti meglio a non lasciare le celle vuoto perchè altrimenti la larghezza della cella non sarà rispettata in alcuni client di posta elettronica

per il margine superiore e inferiore che possiamo usa l'attributo 'vspace', non dimenticare di dare all'immagine un attributo align = left o right. Altrimenti lo 'spazio vs' non funzionerà.

Answer 8

Ho trovato un modo per applicare float su Outlook.com.
Solo in maiuscolo il tag come Float: lasciato.

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

Forse si dovrebbe usare importante troppo!;
L'ho provato e ha funzionato.