html - HTML 垂直对齐

Question

我有一个表格对齐我在做我想做的事情时遇到了麻烦。下面是我所拥有的，但我希望其中包含 1 的单元格拥抱整个表格的顶部，而我希望其中包含 2 的单元格拥抱表格的底部基线。单元 3 可能具有可变高度。有谁知道这怎么可能？可能我缺少一些简单的东西，但已经弄清楚了。

<table cellpadding="0" cellspacing="0" border="0">
       <tr>
       <td valign="top">
              <table cellpadding="0" cellspacing="0" border="0" width="50">
              <tr>
                     <td>1
                    </td>
                </tr>
                <tr>
                     <td>2
                    </td>
                </tr>
            </table>
        </td>
        <td height="200" width="50">3
        </td>
    </tr>
</table>

Answer 1

您需要height="100%"在表格上添加 a 以及单元格上的一些valign属性。

<table cellpadding="0" cellspacing="0" border="0" height="100%">
  <tr>
  <td>
    <table cellpadding="0" cellspacing="0" border="0" width="50" height="100%">
      <tr>
        <td valign="top">1
        </td>
      </tr>
      <tr>
        <td valign="bottom">2
        </td>
      </tr>
    </table>
  </td>
  <td>
    <table><tr><td height="200" width="50">3</td></tr></table>
  </td>
  </tr>
</table>

Answer 2

啊想通了：

<table width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="300" height="19">1</td>
    <td width="300" rowspan="2">
    <br>
    <br>
    3<br>
    <br>
    </td>
  </tr>
  <tr>
    <td valign="bottom">
    <table width="300" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>2</td>
      </tr>
    </table></td>
  </tr>
</table>