CSS - Составьте строку содержания

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>