CSS 浮动 Div 服从/不服从垂直对齐

Question

提问by Tom Ritter

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.

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

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>

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

Here are the problems:

以下是问题：

Why does the @ sign sit at the same level as the yellow div?
Supposedly vertical-align doesn't apply to block elements (like a floated div) 1. But it does!
How can I make the @ sit at the bottom or make it full height of the table cell?

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

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

我正在 IE7 和 FF2 中进行测试。目标支持是 IE6/7、FF2/3。

Clarification:The goal is to have the red @ on the bottom line of the table cell, nextto 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-heightwill not help.

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

Answer 1

采纳答案by Tom Ritter

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

我从来没有回答过前两个问题，所以请随时在下面给出你的答案。但我确实解决了最后一个问题，即如何使其工作。

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

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

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

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

Then I used the following CSS

然后我使用了以下 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>

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

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

这一切的关键是让一个 div 的位置绝对相对于它的父级，父级必须声明为 position:relative

Answer 2

回答by David Alpert

i've found this article to be extremely useful in understanding and troubleshooting vertical-align:

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

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

了解垂直对齐，或“如何（不）垂直居中内容”

Answer 3

回答by PhiLho

Add clear: bothto the second element. If you want to @ to be below the yellow box, put it last in HTML code.

添加clear: both到第二个元素。如果您希望 @ 位于黄色框下方，请将其放在 HTML 代码的最后。

Answer 4

回答by Matthew Rapati

If you don't want both divs on the same line then don't float them both right. If you put the @ below the text in the markup and then set the float to 'clear' it would put it below the text.

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

Answer 5

回答by nymacro

http://www.w3.org/TR/CSS2/visudet.html#line-height
This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element. The following values only have meaning with respect to a parent inline-level element, or to a parent block-level element, if that element generates anonymous inline boxes; they have no effect if no such parent exists.

http://www.w3.org/TR/CSS2/visudet.html#line-height
此属性影响行内元素生成的框在行框内的垂直定位。以下值仅对父行内元素或父块级元素有意义，如果该元素生成匿名行内框；如果不存在这样的父项，则它们无效。

There is always confusion about the vertical-align property in CSS, because in most cases it doesn't do what you expect it to do. This is because it isn't the same as valign, which is allowable in many HTML 4 tags.

CSS 中的 vertical-align 属性总是令人困惑，因为在大多数情况下它不会做你期望它做的事情。这是因为它与许多 HTML 4 标签中允许的 valign 不同。

For further information, you can check out:

有关更多信息，您可以查看：

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

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

The link which David Alpert posted is incredibly useful in this matter.

David Alpert 发布的链接在这方面非常有用。

CSS 浮动 Div 服从/不服从垂直对齐

提问by Tom Ritter

采纳答案by Tom Ritter

回答by David Alpert

回答by PhiLho

回答by Matthew Rapati

回答by nymacro

相关推荐

最近更新

标签

CSS 浮动 Div 服从/不服从垂直对齐

提问by Tom Ritter

采纳答案by Tom Ritter

回答by David Alpert

回答by PhiLho

回答by Matthew Rapati

回答by nymacro

相关推荐

CSS 中的像素密度、视网膜显示和字体大小

CSS 如何在div内垂直居中具有可变高度的内容？

CSS 在 Twitter Bootstrap 中更改选择标签的宽度

CSS 如何使用css将文本放在“框”的右上角或右下角

相关推荐

最近更新

标签