浮动框的 HTML 布局帮助答案

【问题标题】：HTML layout help with floating box浮动框的 HTML 布局帮助
【发布时间】：2010-03-11 10:30:34
【问题描述】：

创建这样的 HTML 布局需要什么 CSS：

+---[li]-------------------------------------------- -+ |+--[div]--------------------------------------------------+----+ | ||带有一些文本的标签，必要时截断…||BOX|| |+--------------------------------------------++-- -+| |+--[div]------------------------------------------+ | ||另一个标签，必要时截断 || |+------------------------------------------------ -+| +-------------------------------------------------- --+

外部<li> 是固定宽度的，与列表中的其他列表项一起向左浮动
BOX 应该向右浮动，在上面的<div> 上方，它只包含两个字母
<div>s 中的任何文本都不应该换行，溢出应该被隐藏
整个事情应该在 IE7 怪癖模式下工作，最好是

目前我有：

<li style="float: left; width: 175px; white-space: nowrap; overflow: hidden;">
  <div style="float: right;">XX</div>
  <div>A label with some text, truncate if necessary</div>
  <div>Another label, truncate if necessary</div>
</li>

但我无法让 BOX 将鼠标悬停在第一个标签上。

【问题讨论】：

标签： css

【解决方案1】：

发生这种情况是因为右浮动 div 不能围绕不可环绕的文本浮动。

试试这个

<li style="float: left; width: 175px; white-space: nowrap; overflow: hidden; position: relative;">
  <div style="position: absolute; right: 0px; background-color: #FFFFFF;">XX</div>
  <div>A label with some text, truncate if necessary</div>
  <div>Another label, truncate if necessary</div>
</li>

如果这是你想要的。

【讨论】：

绝对位置将浮动的 BOX 从其父级带到页面的右边框。
它没有，因为我添加了“位置：相对；”成“礼”。我在 FF 和 IE8 中检查了这个 - 它有效。你有不同的结果吗？
很好，非常感谢！ :) （我忽略了 li 的位置）

【解决方案2】：

这是预期的结果吗？

alt text http://img51.imageshack.us/img51/6603/boxf.jpg

<li style="float: left; width: 175px; white-space: nowrap; overflow: hidden;">
  <div style="float: right; position: relative; background-color: red;">BOX</div>
  <div>A label with some text, truncate if necessary</div>
  <div>Another label, truncate if necessary</div>
</li>

省略position: relative，你会得到：

alt text http://img360.imageshack.us/img360/7205/box2.jpg

【讨论】：

在标准模式下：是，在 Quirks 模式下：否。

【解决方案3】：

你试过float: left第一个标签吗？

顺便说一句，Firebug 对调试有很大帮助...

【讨论】：

什么都不改变 float: left; 恐怕没什么大不了的。