html - 「td」タグの末尾に独立した「a」タグを配置する

Question

やあみんな私は次のレイアウトを持っています：

<table>
  <tr>
    <td>
      <div>
        I´m bigger than the other<br>
        I´m bigger than the other<br>
        I´m bigger than the other<br>
        I´m bigger than the other<br>
        I´m bigger than the other<br>
        I´m bigger than the other<br>
        I´m bigger than the other<br>
        I´m bigger than the other<br>
      </div>
    </td>
    <td>
      <div>
        I´m smaller than the other<br>
        I´m smaller than the other
      </div>
      <a href="">I should be at the bottom of my parent td</a>
    </td>
  </tr>
</table>

http://jsfiddle.net/BqxuM/

ここで、td-tag の下部にある 2 番目の td-tag に a-tag を配置したいと思います! これを達成するためにさまざまなことを試みましたが、成功しませんでした。

それで、誰かがこれを機能させるための答えを持っていますか?

PS: これが js/jquery の「ハック」なしで実行できれば、とてもうれしいです。

Answer 1

これが使用する唯一の構造である場合は、 for および for を使用position: relative;し<table>ますposition: absolute;。<a>

デモ

CSS

table {
  border: solid 1px black;
  position: relative;
}

td {
  padding: 5px;
  border: solid 1px black;
}

a {
  position: absolute; 
  bottom: 0;
}

Answer 2

それは同じtdにある必要がありますか？

これはどう：

<table>
    <tr>
        <td>
            <div>big<br /> div</div>
        </td>
        <td>
            <div>small div</div>
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
            <a href="#">link here</a>
        </td>
    </tr>
</table>

Answer 3

CSS

.my-bottom-link-parent {
  position:relative;
  /* padding-bottom: the height of the a element */
}

.my-bottom-link-parent a {
  position:absolute;
  bottom:0;
}

html

<table>
  <tr>
    <td>
      <div>
        I´m bigger than the other<br>
        I´m bigger than the other<br>
        I´m bigger than the other<br>
        I´m bigger than the other<br>
        I´m bigger than the other<br>
        I´m bigger than the other<br>
        I´m bigger than the other<br>
        I´m bigger than the other<br>
      </div>
    </td>
    <td class="my-bottom-link-parent">
      <div>
        I´m smaller than the other<br>
        I´m smaller than the other
      </div>
      <a href="">I should be at the bottom of my parent td</a>
    </td>
  </tr>
</table>

Answer 4

これはあなたがそれを行う方法の例です:

親: 位置:相対; 子: 位置:絶対; 表示ブロック; 下:0;

td {
padding: 5px;
border: solid 1px black;
position:relative;
}

 a{
 display:block;
 bottom:0;
 position:absolute;
}    

http://jsfiddle.net/BqxuM/4/

Answer 5

相対位置を使用:

td {
  padding: 5px;
  border: solid 1px black;
  position: relative;
}

td a {
  position: absolute;
  bottom: 0px;
}