响应式电子邮件：在TD内分发三个表

时间：2014-09-18 13:40:38

标签： responsive-design html-email css text-align

我正在学习响应式电子邮件设计，当我将三张桌子放入td时，我遇到了麻烦。我可以将两张桌子放入td并分别左右对齐，它们布局得很好。但是当我扔进第三张桌子时，即使在确保三张桌子的总宽度明显小于容器桌子的宽度之后，他们也无法证明这一点。

我已尝试设置td align =＆＃34;对齐＆＃34;然后将每个表格左对齐：

      <tr>
        <td align="justify" valign="top" class="icons" bgcolor="#ffffff" style="padding: 0px 0px 0px 0px; color: #ffffff; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size:14px; line-height:24px;">
                <table class="gear" width="180" height="185" align="left" border="0" bgcolor="#00adef" cellpadding="0" cellspacing="0">
                  <tr>
                   <td class="gear" align="center" valign="middle" style="padding: 5px 5px 5px 5px;">
                    CLASSIC SOHO OFFICE. STATE OF THE ART INFRASTRUCTURE.<br/><br/><img src="http://www.michaelcoleman.net/files/cushman/20140918/images/gear.png" alt="One Soho Square" width="60" height="60" border="0px"></img>
                    </td>
                  </tr>
                </table>
                <table class="arrow" width="180" height="185" align="left" border="0" bgcolor="#44c9f6" cellpadding="0" cellspacing="0">
                  <tr>
                   <td class="arrow" align="center" valign="middle" style="padding: 5px 5px 5px 5px;">
                    CEILING UP TO 13'6", NATURAL LIGHT, OVERSIZE TERRACES<br/><br/><img src="http://www.michaelcoleman.net/files/cushman/20140918/images/arrow.png" alt="One Soho Square" width="60" height="60" border="0px"></img>
                    </td>
                  </tr>
                </table>
                <table class="divide" width="180" height="185" align="left" border="0" bgcolor="#00b9f2" cellpadding="0" cellspacing="0">
                  <tr>
                   <td class="divide" align="center" valign="middle" style="padding: 5px 5px 5px 5px;">
                    SPACES FROM<br/>11,000 TO 130,000 RSF<br/><br/><img src="http://www.michaelcoleman.net/files/cushman/20140918/images/divide.png" alt="One Soho Square" width="60" height="60" border="0px"></img>
                    </td>
                  </tr>
                </table>

                <br style="clear:both;">
        </td>
      </tr>

我尝试排除td align属性，只是将每个表分别对齐左，中，右：

     <tr>
        <td valign="top" class="icons" bgcolor="#ffffff" style="padding: 0px 0px 0px 0px; color: #ffffff; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size:14px; line-height:24px;">
                <table class="gear" width="180" height="185" align="left" border="0" bgcolor="#00adef" cellpadding="0" cellspacing="0">
                  <tr>
                   <td class="gear" align="center" valign="middle" style="padding: 5px 5px 5px 5px;">
                    CLASSIC SOHO OFFICE. STATE OF THE ART INFRASTRUCTURE.<br/><br/><img src="http://www.michaelcoleman.net/files/cushman/20140918/images/gear.png" alt="One Soho Square" width="60" height="60" border="0px"></img>
                    </td>
                  </tr>
                </table>
                <table class="arrow" width="180" height="185" align="center" border="0" bgcolor="#44c9f6" cellpadding="0" cellspacing="0">
                  <tr>
                   <td class="arrow" align="center" valign="middle" style="padding: 5px 5px 5px 5px;">
                    CEILING UP TO 13'6", NATURAL LIGHT, OVERSIZE TERRACES<br/><br/><img src="http://www.michaelcoleman.net/files/cushman/20140918/images/arrow.png" alt="One Soho Square" width="60" height="60" border="0px"></img>
                    </td>
                  </tr>
                </table>
                <table class="divide" width="180" height="185" align="right" border="0" bgcolor="#00b9f2" cellpadding="0" cellspacing="0">
                  <tr>
                   <td class="divide" align="center" valign="middle" style="padding: 5px 5px 5px 5px;">
                    SPACES FROM<br/>11,000 TO 130,000 RSF<br/><br/><img src="http://www.michaelcoleman.net/files/cushman/20140918/images/divide.png" alt="One Soho Square" width="60" height="60" border="0px"></img>
                    </td>
                  </tr>
                </table>

                <br style="clear:both;">
        </td>
      </tr>

我无法获得任何工作。我真的很感激任何帮助！

以下是我正在处理的内容的链接：http://michaelcoleman.net/files/cushman/20140918/OSS20140918.html

-MC

1 个答案:

答案 0 :(得分：0)

我明白了！我添加了一个包含三列的主表，并将每个较小的表放入一列。我仍然需要回去清理它，但它能正常运行。现在看看我能不能做出响应。

      <tr>
        <td align="justify" valign="top" class="icons" bgcolor="#ffffff" style="padding: 0px 0px 0px 0px; color: #ffffff; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size:14px; line-height:24px;">
          <table width="100%" border="0">
            <tr>
              <td>
                <table class="gear" align="left" width="185" height="185" border="0" bgcolor="#00adef" cellpadding="0" cellspacing="0">
                  <tr>
                   <td class="gear" align="center" valign="middle" style="padding: 5px 5px 5px 5px;">
                    CLASSIC SOHO OFFICE. STATE OF THE ART INFRASTRUCTURE.<br/><br/><img src="http://www.michaelcoleman.net/files/cushman/20140918/images/gear.png" alt="One Soho Square" width="60" height="60" border="0px"></img>
                    </td>
                  </tr>
                </table>
              </td>
              <td>
                <table class="arrow" align="center" width="185" height="185" border="0" bgcolor="#44c9f6" cellpadding="0" cellspacing="0">
                  <tr>
                   <td class="arrow" align="center" valign="middle" style="padding: 5px 5px 5px 5px;">
                    CEILING UP TO 13'6", NATURAL LIGHT, OVERSIZE TERRACES<br/><br/><img src="http://www.michaelcoleman.net/files/cushman/20140918/images/arrow.png" alt="One Soho Square" width="60" height="60" border="0px"></img>
                    </td>
                  </tr>
                </table>
              </td>
              <td>
                <table class="divide" align="right" width="185" height="185" border="0" bgcolor="#00b9f2" cellpadding="0" cellspacing="0">
                  <tr>
                   <td class="divide" align="center" valign="middle" style="padding: 5px 5px 5px 5px;">
                    SPACES FROM<br/>11,000 TO 130,000 RSF<br/><br/><img src="http://www.michaelcoleman.net/files/cushman/20140918/images/divide.png" alt="One Soho Square" width="60" height="60" border="0px"></img>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
相关问题
最新问题