0

我有 3 个 td 标签，其中包含一些文本和文本后的按钮。即使 td 包含不同数量的文本，我也希望按钮对齐。

我不想在段落部分设置固定高度，因为这会限制可以输入的文本数量。有没有办法做到这一点？

这是它的屏幕截图：

http://s23.postimage.org/cnp1f70vv/Untitled_1.jpg

这是 HTML 代码（道歉）：

<td width="300" valign="top" height="114">
    <div class="imageTextOverlay_1">BOOK A VISIT</div>
    <a href="/visit-us.aspx">
    <img width="300" height="136" alt="Visit Beaufort Court" src="/media/1281571/visit_us.jpg">
    </a>
<h3>Visit Beaufort Court</h3>
<p>If you would like to find out more about wind energy, solar power, borehole cooling or biomass then come and visit us at Beaufort Court. We welcome schools, colleges, universities, professional bodies and community groups.</p>
<a class="imageButtonOverlay" href="/visit-us.aspx">Book Now >></a>
</td>

这是按钮的CSS：

.imageButtonOverlay {
    background-color: #78A22F;
    border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
    float: right;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin: 5px 0 20px;
    padding: 5px 7px;
}
4

4 回答 4

1

由于您已经在使用表格，因此您可以简单地将按钮分隔到新行上：

<table>
    <tbody>
        <tr>
            <td><!-- First paragraph --></td>
            <td><!-- Second paragraph --></td>
            <td><!-- Third paragraph --></td>
        </tr>
        <tr>
            <td><!-- First button --></td>
            <td><!-- Second button --></td>
            <td><!-- Third button --></td>
        </tr>
    </tbody>
</table>

JSFiddle 示例。

于 2013-03-19T11:00:15.140 回答
0

您可以通过 CSS 设置按钮的位置position:absolute，如下所示：

td {
  position:relative;
  padding-bottom:40px;
}
td .imageButtonOverlay {
  position:absolute;
  bottom:10px;
  right:10px;
}
于 2013-03-19T11:00:18.760 回答
0

添加position:relative到td和position:absolute到a class

td{
    background:yellow;
    position:relative
}
.imageButtonOverlay{
    position:absolute;
    bottom:0
}

演示

于 2013-03-19T11:01:30.273 回答
0 
<table border="0">
  <tbody>
    <tr>
      <td>Paragraph 1</td>
      <td>Paragraph 2</td>
      <td>Paragraph 3</td>
    </tr>
    <tr>
      <td style="text-align:right"><input type="button" value="Button 1" /></td>
      <td style="text-align:right"><input type="button" value="Button 2" /></td>
      <td style="text-align:right"><input type="button" value="Button 3" /></td>
    </tr>
  </tbody>
</table>
于 2013-03-19T11:02:27.380 回答