Question

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

+--[li]---------------------------------------------+
|+--[div]-------------------------------------++---+|
|| A label with some text, truncate if necess…||BOX||
|+--------------------------------------------++---+|
|+--[div]------------------------------------------+|
|| Another label, truncate if necessary            ||
|+-------------------------------------------------+|
+---------------------------------------------------+

外部<li>是固定宽度，左侧浮动列表中的其他列表项
BOX应向右浮动，位于上方<div>上方，它只包含两个字母
<div>中没有文字应该换行，溢出应该隐藏
整个事情应该在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悬停在第一个标签上。

Answer 1

这是预期的结果吗？

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

Answer 2

这是因为右浮动的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>

如果这是你想要的。

Answer 3

您是否尝试float: left第一个标签？

BTW，Firebug将帮助你进行大量的调试......

HTML布局有助于浮动框

3 个答案: