web-dev-qa-db-ja.com

Outlook HTMLメールで、floatが機能しない

長方形のボックスがあるこのレイアウトが必要です。そして、左側のボックス内にはテキストがあり、右側には画像があります。これはブラウザでは正常に見えますが、HTMLメールとして送信された場合、Outlookではフロート権は機能しないようです。テキストの下の次の行に画像を配置します。この作品を作る方法についてのアイデアはありますか？ （テーブルの使用を避けようとしています。）

<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>
cssoutlook-2007
33
Foo

HTMLのレンダリングに関しては、ほとんどの電子メールクライアントは原始的であり、多くの整形式のHTML要素を破壊します。

次のようなオンラインリソースをお勧めします。

HTMLメールのコーディング方法： MailChimp

このSOディスカッションは役に立つかもしれません：

HTMLメールデザインのガイドラインはありますか？

24
Marc Audet

会話に非常に遅れましたが、ここではalign=""代わりに。

ここの例

また、htmlメールでリソースを探している場合（正しいとマークした回答は非常に一般的であると思われます）、ここに リソースの巨大なリスト があります。

21
John

これは、HTMLメールのコーディングに関するMail Chimpの非常に優れたガイドです。

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

基本的なヒント：

  • レイアウトにテーブルを使用します。
  • 最も広いテーブルを最大600ピクセル幅に設定します。
  • JavaScriptやFlashを使用しないでください
  • 一部のメールクライアントはCSSを破棄するため、スタイルタグでCSSを使用しないでください。
  • インラインCSSスタイルのみを使用します。

基本的に2003年のようにメールをコーディングします。

9
Billy Moat

CampaignMonitorは、複数の電子メールクライアントにわたるすべてのCSSサポートに このかなり素晴らしいガイド を提供します。これは pdf または xls のダウンロードとしても利用可能です。

上記の答えが示すように、CSSの電子メールサポートは非​​常に制限されています。その主な理由は、 MicrosoftがWordをHTMLレンダリングエンジンとして使用するという決定 です。

6
Sinister Beard

Outlook.comでfloatを適用する方法を見つけました。
Just capitalizeFloat：leftのようなタグ。

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

多分あなたは！importantを使うべきです;
私はそれをテストし、機能しました。

3
Didier Margarido

チェックアウト https://www.campaignmonitor.com/css/ ここには、メールでサポートされているものとサポートされていないものがすべてリストされています

フロートの代わりに、外部テーブルを使用して、フロートする内容を外部テーブルの左tdに左に置くことができます。

これはエレガントな答えではありませんが、私はこのようにしました

2
Pratik

シンプルなフローティング画像は

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

ただし、テキストと画像の間にパディングを使用しても確実な結果が得られない場合、Outlookはマージンとパディングを削除し、テキストは画像のすぐ横に貼り付けられます。だからこれを試してください：

<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、Outlook（オンライン）、Microsoft Outlook（デスクトップクライアント）などで動作するパディングマージン効果を得るには、 'table'要素をラップする必要があります...

テーブルにalign = leftまたはright属性を与えます。 （ここで答えを編集してください：さらに、他のメールクライアントのフォールバックもテーブルにフロート値を与えるので、両方とも相互にバックアップします。「フロート」を理解しているクライアントもいれば、両方を理解しているクライアントもいます。 ...）テーブルは、画像のようにテキスト内に浮かびます。唯一の違いは、Outlookでは、左揃えまたは右揃えの画像では改行が生成されないテキストの自動改行がテーブルで生成されることです。

マージンを設定するには、現在テーブルを操作しているため、イメージセルの左または右にwidth = "15"の余分な "td"を追加し、その中に改行なしスペースを追加します。 （または透明なgif-> spacer.gif）

&nbsp;

セルを空のままにしないでください。そうしないと、特定のメールクライアントでセルの幅が考慮されないためです。

上部と下部のマージンには、「vspace」属性を使用できます。画像にalign = leftまたはright属性を指定することを忘れないでください。そうしないと、「vspace」は機能しません。

2
Julesezaar

何かの右側に何かを浮かせているとき、正しい浮動要素は常にコードの最初に現れます。このような：

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