आउटलुक एचटीएमएल ईमेल में, फ्लोट काम नहीं करता

Question

मुझे यह लेआउट चाहिए जहां मेरे पास एक आयताकार बॉक्स है। और बाईं ओर के बॉक्स के अंदर एक पाठ है और दाईं ओर एक छवि है। यह ब्राउज़र में ठीक दिखता है, लेकिन जब एक HTML ईमेल के रूप में भेजा जाता है, तो दृष्टिकोण में फ्लोट दाएं काम नहीं लगते हैं। यह छवि को पाठ के नीचे अगली पंक्ति में रखता है। इस काम को कैसे बनाया जाए इस पर कोई विचार? (मैं तालिकाओं का उपयोग से बचने के लिए कोशिश कर रहा हूँ।)

<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

यह एचटीएमएल प्रतिपादन की बात आती है, सबसे ईमेल क्लाइंट आदिम कर रहे हैं और अच्छी तरह से गठन HTML तत्वों का एक बहुत टूट जाएगा।

मैं कुछ ऑनलाइन संसाधनों जैसे की सिफारिश करेंगे:

कैसे HTML ईमेल कोड करने के लिए: MailChimp

यह इतना चर्चा सहायक हो सकता है:

What guidelines for HTML email design are there?

Answer 2

यह एक बहुत अच्छी गाइड है एचटीएमएल ईमेल के लिए कोडिंग पर मेल चिम्प से:

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

कुछ बुनियादी युक्तियाँ: लेआउट के लिए

• उपयोग टेबल।
• अपनी विस्तृत तालिका को अधिकतम 600px चौड़ा सेट करें।
• जावास्क्रिप्ट या फ्लैश
• किसी स्टाइल टैग में सीएसएस का उपयोग न करें क्योंकि कुछ मेल क्लाइंट इसे छोड़ देंगे।
• केवल इनलाइन सीएसएस शैलियों का उपयोग करें।

मूल रूप से अपने ईमेल कोड के रूप में अगर यह मोटे तौर पर था 2003

Answer 3

CampaignMonitor कई ईमेल ग्राहकों भर में सभी सीएसएस समर्थन है, जो भी एक pdf या xls डाउनलोड के रूप में उपलब्ध है के लिए this rather brilliant guide प्रदान करते हैं।

ऊपर दिए गए उत्तरों के मुताबिक, सीएसएस के लिए ईमेल समर्थन बहुत सीमित है, ज्यादातर Microsoft's descision to use Word as its html rendering engine के कारण।

Answer 4

बातचीत के लिए बहुत देर हो चुकी है, लेकिन इसके बजाय align="" का उपयोग करके HTML ईमेल में "फ़्लोट" करने का तरीका बताया गया है।

Example here

इसके अलावा, आप देख रहे हैं HTML ईमेल पर संसाधनों के लिए (मुझे लगता है आप कर रहे हैं इस सवाल का जवाब आप सही चिह्नित के रूप में बहुत सामान्य है), यहाँ एक huge list of resources है।

Answer 5

जांच https://www.campaignmonitor.com/css/ यहाँ सब बातों क्या समर्थन कर रहे में सूचीबद्ध किया है और ईमेल

नाव के बजाय आप एक बाहरी तालिका का उपयोग और सामग्री आप बाहरी तालिका के बाईं ओर टीडी में छोड़ दिया फ्लोट करने के लिए चाहते हैं रख सकते हैं में समर्थित नहीं।

इस एक सुरुचिपूर्ण जवाब नहीं है, लेकिन मैं इसे इस तरह

Answer 6

आप कुछ का सही सही चल तत्व allways कोड में पहली apear चाहिए के लिए कुछ तैर रहे हैं जब से किया था। इस तरह:

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

Answer 7

सरल चल छवियों

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

की तरह हो सकता है लेकिन है कि जिस तरह से आप पाठ और छवि के बीच गद्दी के साथ ठोस परिणाम प्राप्त नहीं होगा, दृष्टिकोण मार्जिन और गद्दी दूर करता है और अपने पाठ रहना होगा छवि के ठीक आगे। तो यह प्रयास करें:

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

आप Gmail, आउटलुक (ऑनलाइन), माइक्रोसॉफ्ट आउटलुक (डेस्कटॉप क्लाइंट) में काम करने के लिए गद्दी मार्जिन असर पाने के लिए इसके चारों ओर एक 'तालिका' तत्व रैप करने के लिए की जरूरत है, ...

तालिका को एक align = left या दाएं विशेषता दें। (यहां उत्तर संपादित करें: इसके अलावा अन्य ईमेल क्लाइंट्स के लिए फ़ॉलबैक भी तालिका को एक फ्लोट वैल्यू देता है, इसलिए दोनों करें। वे एक-दूसरे के लिए बैक-अप हैं। कुछ क्लाइंट "फ़्लोट" को समझते हैं, अन्य लोग "संरेखित" समझते हैं, कुछ समझते हैं, ...) आपकी तालिका पाठ में लगभग एक छवि की तरह तैर जाएगी। केवल अंतर यह है कि दृष्टिकोण में एक तालिका टेक्स्ट में एक स्वचालित लाइन ब्रेक उत्पन्न करती है जहां बाएं या दाएं संरेखित वाली छवि ब्रेक उत्पन्न नहीं करती है।

मार्जिन सेट करने के लिए, क्योंकि अब हम एक टेबल के साथ काम कर रहे हैं, एक चौड़ाई = "15" के साथ एक अतिरिक्त "टीडी" जोड़ें जिसमें आपके छवि सेल के बाएं या दाएं और इसमें एक गैर-ब्रेकिंग-स्पेस है। (या एक transparant gif -> spacer.gif)

  

बेहतर होगा कि तुम कोशिकाओं को रिक्त छोड़ नहीं क्योंकि अन्यथा अपने सेल की चौड़ाई कुछ ईमेल क्लाइंट

ऊपर और नीचे मार्जिन हम कर सकते हैं के लिए में ध्यान नहीं दिया जाएगा 'बनाम' विशेषता का उपयोग करें, छवि को एक align = बाएं या दाएं विशेषता देने के लिए मत भूलना। अन्यथा 'बनाम' काम नहीं करेगा।

Answer 8

मुझे Outlook.com पर फ्लोट लागू करने का कोई तरीका मिला है।
बस कैपिटलटैग जैसे फ्लोट: छोड़ दिया गया।

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

शायद तुम का उपयोग करना चाहिए महत्वपूर्ण भी!;
मैंने इसका परीक्षण किया और यह काम किया।