Multi-line 文本值破坏布局的水平对齐

Question

在下面的代码中，当第一列的值超过一行时（在本例中为标题为“超过一行的长值”的项目），该列不再与其他两个对齐：

<table>
      <tr >
        <td valign="top" style="padding: 17px 19px 0; background-color: #ffffff; text-align: center;" >
          <table border="0" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="border:0 !important;" align="center">
            <tr>
              <td width="100%" align="center" style="padding: 17px 0 0;">
                <h2 style="margin: 0; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 25px; color: #E35E19; font-weight: 900;">Coming soon</h2>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <!-- 3 Even Columns : BEGIN -->
      <tr>
        <td valign="top" style="padding: 0 19px 17px; background-color: #ffffff; text-align: center;">
          <table border="0" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="border:0 !important;">
            <tr>
              <!-- Column : BEGIN -->
              <td width="33.33%">
                <table  cellspacing="0" cellpadding="0" border="0">
                  <tr>
                    <td  style="padding: 22px 11px 0px; text-align: center" >
                      <img src="http://placehold.it/170" width="163" height="163" alt="alt_text" border="0" class="fluid img221" style="vertical-align: middle; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; color: #555555;">
                        </td>
                  </tr>
                  <tr>
                    <td  style="line-height: 20px; color: #000000; padding: 0; text-align: center;">
                      <p style="margin: 0; font-family: 'Roboto', Tahoma, sans-serif; font-size: 13px; line-height: 18px; font-weight: 700;">a long value that exceeds one line</p>
                      <p style="margin: 0; font-family: 'Roboto', Tahoma, sans-serif; font-size: 12px; line-height: 18px;"><i>Lorem ipsum</i></p>
                    </td>
                  </tr>
                </table>
              </td>
              <!-- Column : END -->
              <!-- Column : BEGIN -->
              <td width="33.33%">
                <table  cellspacing="0" cellpadding="0" border="0">
                  <tr>
                    <td  style="padding: 22px 11px 0px; text-align: center" >
                      <img src="http://placehold.it/170" width="163" height="163" alt="alt_text" border="0" class="fluid img221" style="vertical-align: middle; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; color: #555555;">
                        </td>
                  </tr>
                  <tr>
                    <td  style="line-height: 20px; color: #000000; padding: 0; text-align: center;">
                      <p style="margin: 0; font-family: 'Roboto', Tahoma, sans-serif; font-size: 13px; line-height: 18px; font-weight: 700;">Lorem ipsum</p>
                      <p style="margin: 0; font-family: 'Roboto', Tahoma, sans-serif; font-size: 12px; line-height: 18px;"><i>Lorem ipsum</i></p>
                    </td>
                  </tr>
                </table>
              </td>
              <!-- Column : END -->
              <!-- Column : BEGIN -->
              <td width="33.33%">
                <table  cellspacing="0" cellpadding="0" border="0">
                  <tr>
                    <td  style="padding: 22px 11px 0px; text-align: center" >
                      <img src="http://placehold.it/170" width="163" height="163" alt="alt_text" border="0" class="fluid img221" style="vertical-align: middle; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; color: #555555;">
                        </td>
                  </tr>
                  <tr>
                    <td  style="line-height: 20px; color: #000000; padding: 0; text-align: center;">
                      <p style="margin: 0; font-family: 'Roboto', Tahoma, sans-serif; font-size: 13px; line-height: 18px; font-weight: 700;">Lorem ipsum</p>
                      <p style="margin: 0; font-family: 'Roboto', Tahoma, sans-serif; font-size: 12px; line-height: 18px;"><i>Lorem ipsum</i></p>
                    </td>
                  </tr>
                </table>
              </td>
              <!-- Column : END -->
            </tr>
          </table>
        </td>
      </tr>
    </table>

我已经从不需要的标签中删除了代码。上面看到的代码位于一个单独的文件中，目前不是包含的代码段。

Answer 1

默认的垂直对齐方式是居中，但你想要顶部：

tr {
    vertical-align: top;
}

<table>
      <tr >
        <td valign="top" style="padding: 17px 19px 0; background-color: #ffffff; text-align: center;" >
          <table border="0" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="border:0 !important;" align="center">
            <tr>
              <td width="100%" align="center" style="padding: 17px 0 0;">
                <h2 style="margin: 0; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 25px; color: #E35E19; font-weight: 900;">Coming soon</h2>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <!-- 3 Even Columns : BEGIN -->
      <tr>
        <td valign="top" style="padding: 0 19px 17px; background-color: #ffffff; text-align: center;">
          <table border="0" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="border:0 !important;">
            <tr>
              <!-- Column : BEGIN -->
              <td width="33.33%">
                <table  cellspacing="0" cellpadding="0" border="0">
                  <tr>
                    <td  style="padding: 22px 11px 0px; text-align: center" >
                      <img src="http://placehold.it/170" width="163" height="163" alt="alt_text" border="0" class="fluid img221" style="vertical-align: middle; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; color: #555555;">
                        </td>
                  </tr>
                  <tr>
                    <td  style="line-height: 20px; color: #000000; padding: 0; text-align: center;">
                      <p style="margin: 0; font-family: 'Roboto', Tahoma, sans-serif; font-size: 13px; line-height: 18px; font-weight: 700;">a long value that exceeds one line</p>
                      <p style="margin: 0; font-family: 'Roboto', Tahoma, sans-serif; font-size: 12px; line-height: 18px;"><i>Lorem ipsum</i></p>
                    </td>
                  </tr>
                </table>
              </td>
              <!-- Column : END -->
              <!-- Column : BEGIN -->
              <td width="33.33%">
                <table  cellspacing="0" cellpadding="0" border="0">
                  <tr>
                    <td  style="padding: 22px 11px 0px; text-align: center" >
                      <img src="http://placehold.it/170" width="163" height="163" alt="alt_text" border="0" class="fluid img221" style="vertical-align: middle; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; color: #555555;">
                        </td>
                  </tr>
                  <tr>
                    <td  style="line-height: 20px; color: #000000; padding: 0; text-align: center;">
                      <p style="margin: 0; font-family: 'Roboto', Tahoma, sans-serif; font-size: 13px; line-height: 18px; font-weight: 700;">Lorem ipsum</p>
                      <p style="margin: 0; font-family: 'Roboto', Tahoma, sans-serif; font-size: 12px; line-height: 18px;"><i>Lorem ipsum</i></p>
                    </td>
                  </tr>
                </table>
              </td>
              <!-- Column : END -->
              <!-- Column : BEGIN -->
              <td width="33.33%">
                <table  cellspacing="0" cellpadding="0" border="0">
                  <tr>
                    <td  style="padding: 22px 11px 0px; text-align: center" >
                      <img src="http://placehold.it/170" width="163" height="163" alt="alt_text" border="0" class="fluid img221" style="vertical-align: middle; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; color: #555555;">
                        </td>
                  </tr>
                  <tr>
                    <td  style="line-height: 20px; color: #000000; padding: 0; text-align: center;">
                      <p style="margin: 0; font-family: 'Roboto', Tahoma, sans-serif; font-size: 13px; line-height: 18px; font-weight: 700;">Lorem ipsum</p>
                      <p style="margin: 0; font-family: 'Roboto', Tahoma, sans-serif; font-size: 12px; line-height: 18px;"><i>Lorem ipsum</i></p>
                    </td>
                  </tr>
                </table>
              </td>
              <!-- Column : END -->
            </tr>
          </table>
        </td>
      </tr>
    </table>

Answer 2

您必须在嵌套的 table 中放置另一个 valign='top':

JSFIDDLE

...
<tr valign='top'>
              <!-- Column : BEGIN -->
...

完整代码：

<table>
      <tr >
        <td valign="top" style="padding: 17px 19px 0; background-color: #ffffff; text-align: center;" >
          <table border="0" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="border:0 !important;" align="center">
            <tr>
              <td width="100%" align="center" style="padding: 17px 0 0;">
                <h2 style="margin: 0; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 25px; color: #E35E19; font-weight: 900;">Coming soon</h2>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <!-- 3 Even Columns : BEGIN -->
      <tr>
        <td valign="top" style="padding: 0 19px 17px; background-color: #ffffff; text-align: center;">
          <table border="0" role="presentation" cellpadding="0" cellspacing="0" width="100%" style="border:0 !important;">
            <tr valign='top'>
              <!-- Column : BEGIN -->
              <td width="33.33%">
                <table  cellspacing="0" cellpadding="0" border="0">
                  <tr>
                    <td  style="padding: 22px 11px 0px; text-align: center" >
                      <img src="http://placehold.it/170" width="163" height="163" alt="alt_text" border="0" class="fluid img221" style="vertical-align: middle; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; color: #555555;">
                        </td>
                  </tr>
                  <tr>
                    <td  style="line-height: 20px; color: #000000; padding: 0; text-align: center;">
                      <p style="margin: 0; font-family: 'Roboto', Tahoma, sans-serif; font-size: 13px; line-height: 18px; font-weight: 700;">a long value that exceeds one line</p>
                      <p style="margin: 0; font-family: 'Roboto', Tahoma, sans-serif; font-size: 12px; line-height: 18px;"><i>Lorem ipsum</i></p>
                    </td>
                  </tr>
                </table>
              </td>
              <!-- Column : END -->
              <!-- Column : BEGIN -->
              <td width="33.33%">
                <table  cellspacing="0" cellpadding="0" border="0">
                  <tr>
                    <td  style="padding: 22px 11px 0px; text-align: center" >
                      <img src="http://placehold.it/170" width="163" height="163" alt="alt_text" border="0" class="fluid img221" style="vertical-align: middle; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; color: #555555;">
                        </td>
                  </tr>
                  <tr>
                    <td  style="line-height: 20px; color: #000000; padding: 0; text-align: center;">
                      <p style="margin: 0; font-family: 'Roboto', Tahoma, sans-serif; font-size: 13px; line-height: 18px; font-weight: 700;">Lorem ipsum</p>
                      <p style="margin: 0; font-family: 'Roboto', Tahoma, sans-serif; font-size: 12px; line-height: 18px;"><i>Lorem ipsum</i></p>
                    </td>
                  </tr>
                </table>
              </td>
              <!-- Column : END -->
              <!-- Column : BEGIN -->
              <td width="33.33%">
                <table  cellspacing="0" cellpadding="0" border="0">
                  <tr>
                    <td  style="padding: 22px 11px 0px; text-align: center" >
                      <img src="http://placehold.it/170" width="163" height="163" alt="alt_text" border="0" class="fluid img221" style="vertical-align: middle; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; color: #555555;">
                        </td>
                  </tr>
                  <tr>
                    <td  style="line-height: 20px; color: #000000; padding: 0; text-align: center;">
                      <p style="margin: 0; font-family: 'Roboto', Tahoma, sans-serif; font-size: 13px; line-height: 18px; font-weight: 700;">Lorem ipsum</p>
                      <p style="margin: 0; font-family: 'Roboto', Tahoma, sans-serif; font-size: 12px; line-height: 18px;"><i>Lorem ipsum</i></p>
                    </td>
                  </tr>
                </table>
              </td>
              <!-- Column : END -->
            </tr>
          </table>
        </td>
      </tr>
    </table>

Multi-line 文本值破坏布局的水平对齐

Multi-line text values destroy the horizontal alignment of the layout

html

css

html-email

responsive