html - HTMLメールでの位置相対/絶対問題

Question

最近、HTML メールを送信しようとしていますが、div の位置に関するいくつかの問題に直面しています。相対/絶対。

私が本当にやりたかったのは..以下のような画像があります。

ここで、html を介して画像に長方形を描画する必要があります。

誰でも助けることができますか?? 前もって感謝します。

Answer 1

css がメールで機能しない理由がわからない場合は、インライン スタイルのみを使用してみてください。過去に、一部の電子メール クライアントが、内部スタイル シート内のクラスや特定のルールを無視しているように見えることを発見しました。適切に機能するのは、インライン スタイルと B などのタグだけです。

Answer 2

絶対配置に行くことができます。ここにサンプルコードを書きました。このリンクを参照してくださいhttp://jsfiddle.net/shivkumarganesh/Fga2z/

うんテーブルも効率よくなる！

.table{
background:url('your image URL');
background-width:300px;
background-height:200px;
width:300px;
height:200px;
background-repeat:no-repeat"
}

<table class="table">
<tr>
<td></td>
</tr>
</table>
<!--Now make TD and TR tags and give them Custom height so that at least one cell is on the image.Then give that cell <td> a border eg.border:red 2px solid.-->

Answer 3

私の経験から、absoluteは使用しても問題ないはずです。

少なくともposition: relative、長方形を配置するコンテナに追加するようにしてください。それ以外の場合は、ドキュメント本文に対して絶対的に配置されます。

このようなものでうまくいくはずです：

<div class="container">
   <div class="rectangle"></div>
   <img src="....">
</div>

.container{
  position:relative;
}

.rectangle{
  position: absolute;
  bottom: 20px;
  right: 20px; 
  border: 2px solid red;

}

Answer 4

メール クライアントでの機能サポートの経験はありませんが、divこの画像を として設定し、必要な場所に他の div を配置するためにbackground-image使用できませんか?position:relative