HTML（電子郵件）3列表：如何對齊列內的內容

-1

我試圖創建一個具有3列的部分的HTML電子郵件。我希望列對齊，以便每個部分中使用的按鈕和背景水平對齊，但我不知道如何在不同的電子郵件提供程序中完成此操作。我想我會看到如何使背景排列起來，但我不確定如何讓3列中的按鈕對齊。當它在Gmail對齊，它並沒有在Outlook等HTML（電子郵件）3列表：如何對齊列內的內容

這是我現在所擁有的： http://jsfiddle.net/UT7ZD/166/

table { 
 
    mso-table-lspace: 0pt; 
 
    mso-table-rspace: 0pt; 
 
    border-collapse: collapse; 
 
} 
 
table td div { 
 
    height: 100%; 
 
} 
 
.ReadMsgBody { 
 
    width: 100%; 
 
    background-color: #ffffff; 
 
} 
 
.ExternalClass { 
 
    width: 100%; 
 
    background-color: #ffffff; 
 
} 
 
body { 
 
    width: 100%; 
 
    background-color: #ffffff; 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-font-smoothing: antialiased; 
 
    font-family: Georgia, Times, serif 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
} 
 
@media only screen and (max-width: 640px) { 
 
    body[yahoo] .deviceWidth { 
 
    width: 440px!important; 
 
    padding: 0; 
 
    } 
 
    body[yahoo] .center { 
 
    text-align: center!important; 
 
    } 
 
} 
 
@media only screen and (max-width: 479px) { 
 
    body[yahoo] .deviceWidth { 
 
    width: 280px!important; 
 
    padding: 0; 
 
    } 
 
    body[yahoo] .center { 
 
    text-align: center!important; 
 
    } 
 
}

<table width="580" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#ffffff" style="margin:0 auto;"> 
 
    <td> 
 
    <table width="32%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth" bgcolor="#ffede1"> 
 
     <td height="280px" style="padding:10px 10px 20px 10px"> 
 
     <div> 
 
      <center> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing euas magni quod error quidem incidunt eius qui consequatur ab asperiores optio similique ex reiciendis! 
 
      <br> 
 
      <br> 
 
      <br> 
 
      <br><a href="https://www.website.com" target="_blank" style="font-size: 13px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 12px; border-width: 8px 20px; border-style: solid; border-color: #1675a9; display: inline-block; background-color: #1675a9;"><b>Button 1 </b></a> 
 
      </center> 
 
     </div> 
 
     </td> 
 
    </table> 
 
    <table width="32%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth"> 
 
     <td height="280px" style="padding:10px 10px 20px 10px"> 
 
     <div> 
 
      <center>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam. 
 
      <br> 
 
      <br><a href="https://www.website.com" target="_blank" style="font-size: 13px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 12px; border-width: 8px 20px; border-style: solid; border-color: #1675a9; display: inline-block; background-color: #1675a9;"><b>Button 2</b></a> 
 
      </center> 
 
     </div> 
 
     </td> 
 
    </table> 
 
    <table width="32%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth" bgcolor="#ffede1"> 
 
     <td height="280px" style="padding:10px 10px 20px 10px"> 
 

 
     <div> 
 
      <center>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum dolferendis ullam consequatur. 
 
      <br> 
 
      <br><a href="https://www.website.com" target="_blank" style="font-size: 13px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 12px; border-width: 8px 20px; border-style: solid; border-color: #1675a9; display: inline-block; background-color: #1675a9;"><b>Button 3</b></a> 
 
      </center> 
 
     </div> 
 
     </td> 
 
    </table>

來源

2016-07-13 L Cordova

在您的問題中發佈[mcve] – j08691

您的html已損壞，不允許將td作爲表格的子元素，但您缺少 -elements。你也錯過了表格的結束標籤。 – Esko

如果只有一個單元格在裏面，那麼它有什麼用？ –

見http://jsfiddle.net/UT7ZD/168/

還將學習HTML 。您可以使用使用@media查詢，但不知道如何將簡單行或單元添加到表中
您可能會發現this有用。

來源

2016-07-15 08:12:12

HTML（電子郵件）3列表：如何對齊列內的內容

回答

相關問題