浮动Div服从/不服从垂直对齐 [英] Floated Divs Obeying/Not Obeying Vertical-Align

问题描述

在一个垂直对齐的表格单元格中：底部，我有一个或两个div。每个div都是右移的。

据推测，div不应该和底部对齐，但是它们是这样的（我不明白，但是很好）。

然而，当我有两个浮动的div在单元格，他们对齐自己的同一顶行。

我想要第一个，更小，div坐在底部。另一个可以接受的解决方案是使它的表格单元格的全高度。

Within a table cell that is vertical-align:bottom, I have one or two divs. Each div is floated right.
Supposedly, the divs should not align to the bottom, but they do (which I don't understand, but is good).
However, when I have two floated divs in the cell, they align themselves to the same top line.
I want the first, smaller, div to sit all the way at the bottom. Another acceptable solution is to make it full height of the table cell.

很难解释，所以这里的代码：

It's difficult to explain, so here's the code:

<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> 

这里有问题：

1. 为什么@符号位于与黄色div相同的级别？


2. 假定vertical-align不适用于块


3. 如何使@ sit在底部或使其成为表格单元格的完整高度？

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

I am testing in IE7 and FF2. Target support is IE6/7, FF2/3.

说明：目标是让红色@单元格，下一步到黄色框。在任何一个div上使用clear将会把它们放在不同的行。
此外，单元格可以有可变文本行，因此， line-height 不会有帮助。

Clarification: The goal is to have the red @ on the bottom line of the table cell, next to the yellow box. Using clear on either div will put them on different lines. Additionally, the cells can have variable lines of text - therefore, line-height will not help.

推荐答案

我从来没有回答前两个问题，所以请随时给出您的答案如下。但我已经解决了最后一个问题，如何使它的工作。

I never answered the first two questions, so feel free to give your answers below. But I did solve the last problem, of how to make it work.

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

I added a containing div to the two divs inside the table cells like so:

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

然后我使用了以下CSS

Then I used the following 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>

这一切的关键是绝对相对于其父项，父项必须声明为position：relative

The key to it all is for a div to be position absolutely relative to it's parent the parent must be declared position:relative

这篇关于浮动Div服从/不服从垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！