Question

我有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;
}

Answer 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 example

Answer 2

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

td {
  position:relative;
  padding-bottom:40px;
}
td .imageButtonOverlay {
  position:absolute;
  bottom:10px;
  right:10px;
}

Answer 3

将position:relative添加到td，将position:absolute添加到a class

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

<强> DEMO

Answer 4

<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>

CSS - 使内容排队

4 个答案: