HTML和PHP，創建一個包含兩列的HTML電子郵件

好吧，所以我的問題是我想要兩列。我想了解有關當前學校校長和其他人的頭銜及其左側名稱的信息，右邊是實際的信件。但是，所有人的標題和名稱都顯示在字母的上方而不是左側。我想知道是否有人可以查看我的代碼並告訴我我錯過了什麼。我認爲這可能是一個愚蠢的語法錯誤，或者我忘了聲明一條線，但我看不到它。HTML和PHP，創建一個包含兩列的HTML電子郵件

感謝

如果你在瀏覽器中加載它

These are the headers: 
$headers .= "MIME-Version: 1.0\r\n"; 
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n"; 

And this is the message: 

$message = " 

<HTML> 
<HEAD> 

<STYLE type=\"text/css\"> 
body {margin-top: 0px;margin-left: 0px;} 
#page_1 {position:relative; overflow: hidden;margin: 169px 0px 121px 34px;padding: 0px;border: none;width: 782px;} 
#page_1 #id_1 {float:left;border:none;margin: 98px 0px 0px 0px;padding: 0px;border:none;width: 182px;overflow: hidden;} 
#page_1 #id_2 {float:left;border:none;margin: 0px 0px 0px 0px;padding: 0px;border:none;width: 600px;overflow: hidden;} 
.ft0{font: bold 13px 'Times New Roman';text-decoration: underline;color: #47744c;line-height: 15px;} 
.ft1{font: bold 12px 'Times New Roman';text-decoration: underline;color: #47744c;line-height: 14px;} 
.ft2{font: bold 12px 'Times New Roman';color: #47744c;line-height: 15px;} 
.ft3{font: bold 12px 'Times New Roman';text-decoration: underline;color: #47744c;line-height: 13px;} 
.ft4{font: italic bold 12px 'Times New Roman';color: #47744c;line-height: 14px;} 
.ft5{font: italic bold 12px 'Times New Roman';color: #47744c;line-height: 15px;} 
.ft6{font: 16px 'Times New Roman';line-height: 19px;} 
.ft7{font: italic 12px 'Times New Roman';line-height: 15px;} 
.ft8{font: 15px 'Arial';line-height: 17px;} 

.p0{text-align: left;margin-top: 0px;margin-bottom: 0px;} 
.p1{text-align: left;margin-top: 13px;margin-bottom: 0px;} 
.p2{text-align: left;margin-top: 1px;margin-bottom: 0px;} 
.p3{text-align: left;margin-top: 12px;margin-bottom: 0px;} 
.p4{text-align: left;margin-top: 11px;margin-bottom: 0px;} 
.p5{text-align: left;margin-top: 2px;margin-bottom: 0px;} 
.p6{text-align: left;margin-top: 25px;margin-bottom: 0px;} 
.p7{text-align: left;padding-right: 384px;margin-top: 73px;margin-bottom: 0px;} 
.p8{text-align: left;margin-top: 16px;margin-bottom: 0px;} 
.p9{text-align: left;padding-right: 123px;margin-top: 18px;margin-bottom: 0px;} 
.p10{text-align: left;padding-right: 123px;margin-top: 33px;margin-bottom: 0px;} 
.p11{text-align: left;margin-top: 53px;margin-bottom: 0px;} 
.p12{text-align: left;margin-top: 54px;margin-bottom: 0px;} 
.p13{text-align: left;padding-right: 131px;margin-top: 17px;margin-bottom: 0px;} 
.p14{text-align: left;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;} 
.p15{text-align: left;padding-left: 29px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;} 

.td0{padding: 0px;margin: 0px;width: 115px;vertical-align: bottom;} 
.td1{padding: 0px;margin: 0px;width: 103px;vertical-align: bottom;} 

.tr0{height: 17px;} 
.tr1{height: 22px;} 

.t0{width: 218px;margin-left: 96px;margin-top: 17px;font: 15px 'Arial';} 

</STYLE> 
</HEAD> 

<BODY> 
<DIV id=\"page_1\"> 


<DIV> 
<DIV id=\"id_1\"> 
<P class=\"p0 ft0\">Board of Trustees</P> 
<P class=\"p1 ft1\">REDACTED</P> 
<P class=\"p6 ft4\">「Nurturing Hearts,</P> 
<P class=\"p2 ft5\">Developing Minds」</P> 
</DIV> 
<DIV id=\"id_2\"> 
<P class=\"p0 ft6\">$today</P> 
<P class=\"p7 ft6\">$title $first_name $last_name<br>$street_address<br>$city, $state $zip</P> 
<P class=\"p8 ft6\">Dear $title $last_name,</P> 
<P class=\"p9 ft6\">We have received your generous donation of $$mathAmt.00, and we are truly grateful. Since its founding in 1970, The School has been fortunate to receive philanthropic support from forward looking people like you who understand and appreciate the unique significance of our school’s mission in our community. Over these past <NOBR>forty-one</NOBR> years, many of our graduates have become respected professionals and leaders in our community, and our school is widely acknowledged as an important education resource in our region.</P> 
<P class=\"p10 ft6\">On behalf of the Board of Trustees, the Faculty, and our Students, who are the ultimate recipients of your generosity, I wish to personally thank you. Your sacrificial donation sends an especially powerful message during theses challenging economic times about your devotion to the school.</P> 
<P class=\"p11 ft6\">Sincerely yours,</P> 
<P class=\"p12 ft6\">James </P> 
<P class=\"p0 ft6\">Headmaster</P> 
<P class=\"p13 ft8\">For tax purposes, School is pleased to provide the following information. No goods or services were rendered in exchange for this contribution. Please retain this letter for income tax purposes. This written acknowledgement of your donation serves as the substantiation required under section 170 of the Internal Revenue Code.</P> 
<TABLE cellpadding=0 cellspacing=0 class=\"t0\"> 
<TR> 
    <TD class=\"tr0 td0\"><P class=\"p14 ft8\">Date of Gift:</P></TD> 
    <TD class=\"tr0 td1\"><P class=\"p15 ft8\">1/19/2012</P></TD> 
</TR> 
<TR> 
    <TD class=\"tr1 td0\"><P class=\"p14 ft8\">Value of Gift*<SPAN class=\"ft6\">:</SPAN></P></TD> 
    <TD class=\"tr1 td1\"><P class=\"p15 ft8\">$$mathAmt.00</P></TD> 
</TR> 
</TABLE> 
</DIV> 
</DIV> 
</DIV> 

</body> 
</HTML> 

";

來源

2012-12-07 Joel

您的電子郵件看起來不錯，所以我不知道你在做什麼錯事，除本：

大多數電子郵件客戶端不支持基於div的佈局或非內聯樣式。你需要重做你的電子郵件與表格佈局和所有你的CSS內聯（或通過不贊成的HTML屬性聲明）。

http://htmlemailboilerplate.com/可能會幫助您處理一些電子郵件特性。

來源

2012-12-07 05:27:58 greg5green

堆棧溢出不會讓我編輯帖子只添加一個JSFiddle鏈接，但你可以在http://jsfiddle.net/Tpf3B/ – greg5green

看到工作電子郵件是的，我注意到它在瀏覽器中看起來很好，但是我對此很新，所以我想我仍然在搞點東西，哈哈。感謝您的建議，我會嘗試。 – Joel

慢慢來吧。與製作「常規」網站相比，編寫HTML電子郵件可能相當困難。只要確保你的東西在大的東西上驗證（使用不「支持」的屬性不是什麼大問題，但要確保你的tr和table都是封閉的）。另外，請檢查http://premailer.dialect.ca/將您從樣式塊寫入的CSS移動到內聯樣式中。 – greg5green

HTML和PHP，創建一個包含兩列的HTML電子郵件

回答

相關問題