-3

在我的浏览器中看起来不错，但是当我将它移动到 Gmail 时，我的#Container 移动到我的背景图像中“Kamala”字中的“K”字母下，另一个问题是当我将它作为电子邮件发送时，在收到电子邮件#Container 中的所有内容都已经在我的背景图像下。如果 div 无法实现，我应该回到表格，因为我现在有很多问题。我知道我想学习这个错误，但从 2 天开始就不能让它成为应有的方式。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Untitled Document</title>

 <style type="text/css">
div#Container {
position: absolute;
left: 9px;
top: 15px;
 }

 div#Room {
margin-left: 83.5%;
margin-top: 11%;
width: 625px;
 }

 #Room span {
font-family: Times New Roman, Times, serif;
font-weight: bold;
text-align: left;
font-size: 23px;
color: #522405;
 }

 #D { padding-left: 70px;
 }

 #GD { padding-left: 103px;
 }

 #GPV { padding-left: 53px;
 }

 div#Content {
margin-left: 83.5%;
margin-top: 1%;
width: 625px;
 }

 #Right {
position: absolute;
left: 1152px;
top: 222px;
 }

  img.Spacer {
margin-left: 10px;
 }

 div.content {
font-family: Arial, Helvetica, sans-serif;
text-align: left;
color: black;
font-size: 17px;
font-weight: bold;
 }

 .BP {
vertical-align: text-top;
margin-top: 10px;
margin-left: 245px;
 }

 .table {
vertical-align: text-top;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
text-align: center;
color: #002b55;
margin-left: 83.5%;
 }

 .TD {
margin-left: 30px;
 }

 .adress {
font-family: Times New Roman, Times, serif;
font-size: 10px;
text-align: center;
font-weight: bold;
color: #100073; 
 }

 .OOT {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #100073;
text-align:center;
 }

 .res {
vertical-align: top;
padding-left: 25px;
 }
</style>

</head>

<body>

<div align="center">

<img style="position: relative;" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/BK_zpsa93ab347.png" alt="Background" />

</div>

<div id="Container">

<div id="Room" aling="left">

    <a href="http://bit.ly/XSyPG5" title="Deluxe" target="_blank" >

    <img align="left" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/D_zpsf4ea5de8.jpg" border="0px" alt="Deluxe" />

    </a>

    <a href="http://bit.ly/XSyPG5" title="Grand Deluxe" target="_blank" >

    <img align="left" class="Spacer" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/GD_zpse78278b7.jpg" border="0px" alt="Grand Deluxe" />

    </a>


    <a href="http://bit.ly/XSyPG5" title="Grand Pool Villa" target="_blank" >

    <img align="left" class="Spacer" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/GPV_zpsb381cd33.jpg" border="0px" alt="Grand Pool Villa" />

    </a>

    <br />

    <a href="http://bit.ly/XSyPG5" title="Deluxe" target="_blank" style="text-decoration: none;"><span id="D">Deluxe</span></a>
    <a href="http://bit.ly/XSyPG5" title="Grand Deluxe" target="_blank" style="text-decoration: none;"><span id="GD">Grand Deluxe</span></a> 
    <a href="http://bit.ly/XSyPG5" title="Grand Pool Villa" target="_blank" style="text-decoration: none;"><span id="GPV">Grand Pool Villa</span></a>
  </div>

  <div align="left" id="Content" class="content">Situated on a hill, Ayara Kamala offers a beautiful garden and ocean view rooms. The place of the hotel provides quiet, calm and romantic holiday away from all other hotels on Kamala Beach.
<br />
<br />

Big size of rooms, king size beds and impressive bathrooms, are making Ayara Kamala            perfect selection for couples who are looking for privacy and relaxing holiday.
 </div>

<table align="left" class="table" style="border-collapse: separate; border-spacing: 1px;" width="625" border="0">
 <tr>
  <td align="right" style="padding-left: 20px;" width="302"><a href="http://bit.ly/XSyPG5" title="Book Now !"><img src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/BP_zps15c948a1.png" border="0px" alt="Best Rate"/></a></td>
 <td width="321" valign="top"><table class="TD" style="border-collapse: separate; border-spacing: 0px;" border="0px">
 <tr>
 <td height="30" class="res" align="center"><a href="http://bit.ly/XSyPG5" title="B2B Online Booking"><span>www.b2b.onlyonetour.com</span></a></td>
 </tr>
 <tr>
 <td class="res" height="30" align="center"><span>Tel : (66) 02 - 688 - 8883 </span>      </td>
</tr>
<tr>
<td class="res" height="30" align="center"><a href="mailto:rsvn@onlyonetour.com" title="E-mail Reservation"><span>rsvn@onlyonetour.com</span></a></td>
</tr></table>
</td>
</tr>
</table>

<div align="center" id="Right"><a style="text-decoration: none;" href="http://bit.ly/XSyPG5" title="Only One Tour &amp; Travel Group Co., Ltd." target="_blank"><img width="149px" height="90px" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/logoOOT_zps24c21653.png" border="0px" alt="Logo" /></a>
<a style="text-decoration: none;" href="http://bit.ly/XSyPG5" title="Only One Tour &amp; Travel Group Co., Ltd." target="_blank"><span class="OOT">Only One Tour &amp; Travel<br />Group Co., Ltd.</span></a><br /><br />
<a style="text-decoration: none;" href="http://on.fb.me/XXqq56" title="Only One Tour Facebook Page" target="_blank"> <img src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/facebook-logo-png-format-i18_zps83b6a9aa.png" width="145px" height="50px" border="0px" alt="FB"/></a><br /><br />
 <span class="adress">2128/9-11 Charoenkung Rd.,</span><br />
 <span class="adress">Watprayakrai, Bangkorleam,</span><br />
 <span class="adress">10120 Bangkok, Thailand.</span><br />
<a class="adress"  href="http://bit.ly/XSyPG5" target="_blank">www.b2b.onlyonetour.com</a><br />
<a class="adress" href="http://on.fb.me/XXqq56" target="_blank">www.onlyonetour.com (offline)</a>
 </div>

</div>

</body> 

</html>
4

1 回答 1

0

HTML emails are still having to be built primarily using tables due to the numerous email clients and their varying issues with other HTML elements like div tags. So if you're looking for this to be well received by a number of people (and therefore clients) it would be worth, as you suggest, doing it using tables.

See this for more detailed info on email clients and the support they offer: http://www.campaignmonitor.com/blog/post/3472/div-tags-in-html-email-newsletters/

I hope that gives you a little more info on the subject.

于 2013-03-22T11:54:40.140 回答