7

假设我有这样的代码：

<table>
<tr>
    <td>
        <div id="top">top</div>
        <div id="bot">bottom</div>
    </td>
</tr>
</table>

我正在尝试通过 CSS 将 #top 与单元格顶部对齐，将 #bot 与底部对齐。

#top { vertical-align:top; }
#bot { vertical-align:bottom; }

以上似乎不起作用 - 它似乎根本没有任何效果。这是代码的链接：http: //jsfiddle.net/vKPG8/28/

关于为什么会发生这种情况以及如何解决的任何解释？

4

4 回答 4

7

使用 position: absolute 的公认解决方案不是针对此问题的跨浏览器兼容解决方案，因为 Firefox 不允许（并且根据规范不应该）允许在表格单元格或带有 display:table-cell 的元素中进行绝对定位。

似乎没有真正可靠的纯 css 方法来解决这个问题，尽管我确实有一个适用于这种情况的纯 css 修复程序。本质上，我所做的是插入一个足够高的 before 元素，以将文本的底行强制到底部，因为它具有 vertical-align: bottom 集。这本质上与放置 padding-top 相同，所以它不是一个很大的解决方案。

演示：http: //jsfiddle.net/Be7BT/

td {width:200px;height:100px;border:solid 1px;}
#top { 
    display: inline-block;
    vertical-align:top;
    width: 100%;
}
#bot {
    display: inline-block;
    vertical-align:bottom;
    width: 100%;
}
#bot:before{
    content: '';
    display: inline-block;
    height: 100px;
}
于 2014-01-15T18:33:43.703 回答
5

vertical-align用于内联元素并且div是块元素。尝试使用position: absolute和。top: 0bottom: 0

td {
  position: relative;
  width: 200px;
  height: 100px;
  border: solid 1px;
}

#top, #bot { position: absolute; }
#top { top: 0; }
#bot { bottom: 0; }

演示： http: //jsbin.com/iyosac/1/edit
在这里查看更多信息：http ://css-tricks.com/what-is-vertical-align/

td {
  position: relative;
  width: 200px;
  height: 100px;
  border: solid 1px;
}

#top, #bot { position: absolute; }
#top { top: 0; }
#bot { bottom: 0; }
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <table>
    <tr>
      <td>
        <div id="top">top</div><br/>
        <div id="bot">bottom</div>
      </td>
    </tr>
  </table>
</body>
</html>

于 2013-02-03T08:54:02.717 回答
3

我有一个更好的主意，使用嵌套表：

<table width="100px" height="100px" border=1>
    <tr>
        <td valign="top">top</td>
    </tr>
    <tr height=100%>
        <td valign="bottom">bottom
        </td>
    </tr>
</table>
于 2014-07-23T08:37:52.260 回答
2

这样做的方法是rowspan：

<table><tr>
    <td rowspan=2>tall<br>tall<br>tall<br>tall<br>
    <td valign="top">top</td>
</tr><tr>
    <td valign="bottom">bottom</td>
</tr></table>
于 2017-03-12T00:10:57.627 回答