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/

现在我想将a-tag放在td-tag底部的第二个td-tag中！我尝试了许多不同的事情来实现这一目标，但没有成功。

那么有人能帮我解决这个问题吗？

PS：如果没有js / jquery“hacks”可以做到这一点我真的很好。

Answer 1

如果这是您使用的唯一结构，请使用position: relative; <table>和position: absolute; <a>

Demo

CSS

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

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

a {
  position: absolute; 
  bottom: 0;
}

Answer 2

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 3

是否必须使用相同的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 4

使用位置相对：

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

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

Answer 5

这是一个如何做到这一点的例子：

parrent：position：relative; 孩子：位置：绝对;显示：块;底部：0;

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

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

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

在“td”标记的底部放置一个独立的“a”标记

5 个答案: