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 
<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 に答える
0

に追加position:relativeするtd_position:absolutea class

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

デモ

于 2013-03-19T11:01:30.273 に答える
0

position:absolute次のように、CSS でボタンの位置を設定できます。

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