0

嘿伙计们，我有以下布局：

<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”的情况下完成，我会非常好。

4

5 回答 5

2

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

演示

CSS

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

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

a {
  position: absolute; 
  bottom: 0;
}
于 2013-01-11T12:39:33.483 回答
1

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>
于 2013-01-11T12:39:51.753 回答
1

它必须在同一个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>
于 2013-01-11T12:41:25.603 回答
0

使用相对位置：

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

td a {
  position: absolute;
  bottom: 0px;
}
于 2013-01-11T12:39:50.593 回答
0

这是一个示例，您可以如何做到这一点：

父：位置：相对；孩子：位置：绝对；显示：块；底部：0；

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

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

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

于 2013-01-11T12:50:14.200 回答