CSS创建一组具有自动宽度的均匀左边缘的文本

Question

我正在尝试创建类似这样的布局(您需要发挥您的想象力):

A B
  B
  B

A 是一段文字，B 是一段文字，我希望其左边缘与自身对齐。

更复杂的是，B 默认情况下是隐藏的，在设置页面流时不应考虑，而是应该在 A 将鼠标悬停在它出现的任何地方时出现。因此:

A1
Asecond

鼠标悬停在 A1 上变为:

A1 B1
AseB1
   B1

每个 AB 行都包含在一个具有固定宽度的 div 中。我事先不知道 A 的大小，所以我希望 B 只占用 div 中剩余的空间。

在 Firefox 上，我只是让 B 有一个绝对位置，一切都很好，它的工作完全符合我的预期。

但是，在 IE8 上，B 的宽度等于包含的固定宽度的 div，由于 B 已经被 A 的宽度偏移，导致 div 被溢出文本溢出。我可以设置div 到 overflow:hidden，但这只会截断文本。将 B 设置为 width:auto 似乎没有任何作用。

我是不是搞砸了，或者是否有一种方法可以在所有相当现代的浏览器中运行？

Answer 1

试一试:http://www.alistapart.com/articles/conflictingabsolutepositions/冲突的绝对位置是我最喜欢的解决方法。

在某些情况下可能无法在 IE6 中工作，根据此注释:http://fu2k.org/alex/css/frames/