2012-07-05 99 views
1

我最近試圖發送HTML郵件,但我面臨着div位置的一些問題。相對/絕對。我試圖谷歌,發現在電子郵件客戶端不支持div的定位。在HTML郵件中的位置相對/絕對問題

我真正想做的是..我有一個圖像如下。 original image

現在我需要通過html.What我只好動用圖像的矩形是在image.Suppose矩形的正義立場,對一些協調,它是在house.Same像下面的圖片 new image

任何人都可以幫忙嗎? 在此先感謝。

+0

它可以通過position:absolute來完成,之後只需使用right:0和top:300或400就可以使用acc來計算距離 – 2012-07-05 19:24:12

+2

To be誠實的你會在很多電子郵件客戶端掙扎這 – SpaceBeers 2012-07-05 19:36:41

+0

http://www.emailology.org/ – SpaceBeers 2012-07-05 19:37:16

回答

1

你可以去絕對定位。我在這裏寫了示例代碼。請參閱這個鏈接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.--> 
+2

電子郵件客戶端的div沒有位置屬性支持..任何其他選項可能來自表 – Parth 2012-07-05 20:00:19

+0

@Parth我有編輯我以前的答案希望這會引導你無論你想要什麼效果。 – 2012-07-05 20:16:52

0

從我的經驗位置絕對應該可以使用。

只要確保至少將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; 

}

+2

電子郵件客戶端不支持div的位置屬性..任何其他選項可能來自表 – Parth 2012-07-05 19:59:18

0

我有在電子郵件客戶端功能支持沒有經驗,但不能你有一個div凡本圖片設置爲background-image,並使用position:relative將其他div放在你需要它的地方?

+2

電子郵件客戶端不支持div的位置屬性..任何其他選項可能來自表 – Parth 2012-07-05 19:58:26

1

如果你無法弄清楚爲什麼你的css在電子郵件中不起作用,你可能只想嘗試使用內聯樣式。在過去,我發現有些電子郵件客戶端似乎忽略了內部樣式表中的類和某些規則。唯一能正常工作的是內聯樣式和標籤,例如B.

+1

+1很多電子郵件客戶端被刪除我認爲對定位的支持很不明顯。 – steveax 2012-07-05 21:56:34