浮动 div 服从/不服从垂直对齐答案

【问题标题】：Floated Divs Obeying/Not Obeying Vertical-Align浮动 div 服从/不服从垂直对齐
【发布时间】：2010-10-05 01:44:32
【问题描述】：

在一个垂直对齐的表格单元格中：底部，我有一个或两个 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。

澄清：目标是在表格单元格的底线，旁边在黄色框的底部有红色的@。在任一 div 上使用 clear 会将它们放在不同的行上。此外，单元格可以有可变的文本行 - 因此，line-height 将无济于事。

【问题讨论】：

需要使用表吗？ div可以是两者中较高的一个还是总是最左边的div？单元格中还会有其他内容吗？
是的，我需要使用表格（表格是表格数据，其中的数字行数比显示的多）。任何 div 都可能是最高的，具有最多的文本行。其他内容，是什么意思？它非常接近显示的内容，更多的
用于 javascript，并且数字是 -ed。

标签： css

【解决方案1】：

我发现这篇文章对于理解和排除垂直对齐问题非常有用：

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

【讨论】：

我已经阅读了这篇文章，并尝试了这两种方法。第二个不适用于这种情况，对于第一个， position:absolute 将不起作用，因为它相对于页面而不是表格单元格放置它。

【解决方案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 的位置绝对相对于它的父项，必须将父项声明为 position:relative

【讨论】：

【解决方案3】：

将clear: both 添加到第二个元素。如果你想@在黄色框下面，把它放在HTML代码的最后。

【讨论】：

【解决方案4】：

如果您不希望两个 div 在同一行上，则不要将它们都浮动。如果您将 @ 放在标记中的文本下方，然后将浮动设置为“清除”，它会将其放在文本下方。

【讨论】：

【解决方案5】：

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

此属性会影响由行内元素生成的框的行框内的垂直定位。以下值仅对父内联级元素或父块级元素有意义，前提是该元素生成匿名内联框；如果不存在这样的父级，则它们无效。

CSS 中的vertical-align 属性总是令人困惑，因为在大多数情况下，它并没有按照您的预期进行。这是因为它与许多 HTML 4 标签中允许的 valign 不同。

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

【讨论】：