Question

以下是我一直致力于：

<table style="width: 100%">
  <tr>
    <td style="width: 50px;height: 300px;">

      <img alt="Basketball" height="687" src="Basketball.jpg" width="1030" /></td>
    <td style="width: 100px;height: 300px;">
      <p style="width: 100%;text-align:justify">Basketball is a limited-contact sport played on a rectangular court.</p>
      <input style="margin-top:-20px" name="JoinUs" type="button" value="Join this club" />
    </td>
  </tr>
</table>

试图将按钮移到桌子的一角但是它太靠近了段落。对不起，如果这还不够好，还是自学html ......

Answer 1

只有按钮移动到底角：

td:last-child {
    position: relative;
}

input[type="button"] {
    position: absolute;
    bottom: 0;
}

td:last-child {
    position: relative;
}
input[type="button"] {
    position: absolute;
    bottom: 0;
}

<table style="width: 100%">
<tr>
    <td style="width: 50px;height: 300px;">

    <img alt="Basketball" height="687" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDAYrQr9qgT2W00EV_CoCahFki3Vw4lSMNt81k9FCSTXoKT8TY2w" width="1030" /></td>
    <td style="width: 100px;height: 300px;">
        <p style="width: 100%;text-align:justify">Basketball is a limited-contact sport played on a rectangular court.</p>
    <input  name="JoinUs" type="button" value="Join this club" />
    </td>
</tr>
</table>

段落和按钮移到底角：

td:last-child {
    vertical-align: bottom;
}

td:last-child {
    vertical-align: bottom;
}

<table style="width: 100%">
<tr>
    <td style="width: 50px;height: 300px;">

    <img alt="Basketball" height="687" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRDAYrQr9qgT2W00EV_CoCahFki3Vw4lSMNt81k9FCSTXoKT8TY2w" width="1030" /></td>
    <td style="width: 100px;height: 300px;">
        <p style="width: 100%;text-align:justify">Basketball is a limited-contact sport played on a rectangular court.</p>
    <input style="margin-top:-20px" name="JoinUs" type="button" value="Join this club" />
    </td>
</tr>
</table>

如何在HTML中将按钮放到表格的底角？

1 个答案: