Question

在垂直对齐的表格单元格中：底部，我有一个或两个div。每个div都是浮动的据说，div不应该与底部对齐，但它们确实（我不明白，但是很好）。
但是，当我在单元格中有两个浮动div时，它们将自己对齐到相同的顶行我想让第一个较小的div一直坐在底部。另一个可接受的解决方案是使其成为表格单元的全高。

很难解释，所以这是代码：

<style type="text/css"> 
table {
   border-collapse: collapse;
}
td {
   border:1px solid black;
   vertical-align:bottom;
}
.h {
   float:right;
   background: #FFFFCC;
}
.ha {
   float:right;
   background: #FFCCFF;
}
</style> 

<table> 
  <tr> 
    <td> 
      <div class="ha">@</div> 
      <div class="h">Title Text<br />Line 2</div> 
    </td> 
    <td> 
      <div class="ha">@</div> 
      <div class="h">Title Text<br />Line 2<br />Line 3</div> 
    </td> 
    <td> 
      <div class="h">Title Text<br />Line 2</div> 
    </td> 
    <td> 
      <div class="h">Title Text<br />Line 2</div> 
    </td> 
    <td> 
      <div class="h">Title Text<br />Line 2</div> 
    </td> 
  </tr> 
  <tr> 
    <td> 
      <div class="d">123456789</div> 
    </td> 
    <td> 
      <div class="d">123456789</div> 
    </td> 
    <td> 
      <div class="d">123456789</div> 
    </td> 
    <td> 
      <div class="d">123456789</div> 
    </td> 
    <td> 
      <div class="d">123456789</div> 
    </td> 
  </tr> 
</table>

以下是问题：

为什么@符号与黄色div位于同一级别？
据说垂直对齐不适用于块元素（如浮动div）1。但确实如此！
如何让@坐在底部或使其成为表格单元格的全高？

我在IE7和FF2中测试。目标支持是IE6 / 7，FF2 / 3。

澄清：目标是将表格单元格底部的红色@， next 添加到黄色框中。在div上使用clear将把它们放在不同的行上。此外，单元格可以包含可变文本行 - 因此，行高将无济于事。

Answer 1

我发现这篇文章对于理解和排除vertical-align：

非常有用

Understanding vertical-align, or "How (Not) To Vertically Center Content"

Answer 2

我从未回答过前两个问题，所以请随时在下面给出答案。但我做了解决了最后一个问题，即如何让它发挥作用。

我在表格单元格中添加了一个包含div的两个div，如下所示：

<table>
  <tr>
    <td>
      <div class="t">
        <div class="h">Title Text<br />Line 2</div>
        <div class="ha">@</div>
      </div>
    </td>

然后我使用了以下CSS

<style type="text/css">
table {
  border-collapse: collapse;
}
td {
  border:1px solid black;
  vertical-align:bottom;
}
.t {
  position: relative;
  width:150px;
}
.h {
  background: #FFFFCC;
  width:135px;
  margin-right:15px;
  text-align:right;
}
.ha {
  background: #FFCCFF;
  width:15px;
  height:18px;
  position:absolute;
  right:0px;
  bottom:0px;
}
</style>

这一切的关键是让div绝对相对于它的父级必须声明父级位置：relative

Answer 3

将clear: both添加到第二个元素。如果你想让@低于黄色框，请将其放在HTML代码中。

Answer 4

如果您不想在同一条线上同时使用两个div，则不要将它们都向右浮动。如果你把文本放在标记的下方，然后将浮点数设置为'清除'，它就会把它放在文本下面。

Answer 5

http://www.w3.org/TR/CSS2/visudet.html#line-height

此属性会影响由内联级元素生成的框的线框内的垂直位置。以下值仅对父内联级元素或父块级元素有意义，如果该元素生成匿名内联框;如果不存在这样的父母，它们就没有效果。

CSS中的vertical-align属性总是存在混淆，因为在大多数情况下，它不会按照您的预期执行。这是因为它与valign不同，后者在许多HTML 4标签中都是允许的。

有关详细信息，请查看：

http://www.ibloomstudios.com/articles/vertical-align_misuse/ http://www.ibloomstudios.com/articles/applied_css_vertical-align/

David Alpert发布的链接在这件事上非常有用。

浮动的Divs服从/不服从垂直对齐

5 个答案: