主页 / 问题 / 1114273
Accepted
Дмитрий Белый
Asked:2020-04-23 04:32:09 +0800 CST2020-04-23 04:32:09 +0800 CST

对齐表格中的块

  • 772

有一个4列的表格，每列块里面有一个图像，在最后一列，除了图像，还有文本行，可以是任意数量。如何使无论表格最后一列的行数如何，所有列中的图像都处于同一级别？

<table style="height: 59px;" border="1" width="477">
  <tbody>
    <tr>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td>
        <p>Рыба</p>
        <p>Рыба<img alt="" width="114" height="86" /></p>
      </td>
    </tr>
    <tr>
      <td style="width: 112px;"><img alt="" width="114" height="86" /></td>
      <td style="width: 112px;"><img alt="" width="114" height="86" /></td>
      <td style="width: 112px;">
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td>
        <p>Рыба<img alt="" width="114" height="86" /></p>
      </td>
    </tr>
    <tr>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td>
        <p>Рыба<img alt="" width="114" height="86" /></p>
      </td>
    </tr>
  </tbody>
</table>

html

1 个回答

  1. Best Answer

    垂直对齐：底部；

    td {
  vertical-align: bottom;
}
    <table style="height: 59px;" border="1" width="477">
  <tbody>
    <tr>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td>
        <p>Рыба</p>
        <p>Рыба<img alt="" width="114" height="86" /></p>
      </td>
    </tr>
    <tr>
      <td style="width: 112px;">
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td>
        <p>Рыба<img alt="" width="114" height="86" /></p>
      </td>
    </tr>
    <tr>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td style="width: 112px;">
        <p>&nbsp;</p>
        <p><img alt="" width="114" height="86" /></p>
      </td>
      <td>
        <p>Рыба<img alt="" width="114" height="86" /></p>
      </td>
    </tr>
  </tbody>
</table>

    • 0

相关问题