CSS 创建一组具有自动宽度的均匀左边缘的文本
我正在尝试创建一个类似这样的布局（您需要发挥您的想象力）：
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，导致 div 被溢出文本溢出，因为 B 已经偏移了 A 的宽度。我可以将 div 设置为溢出:hidden，但这只会破坏文本。将 B 设置为 width:auto 似乎没有任何作用。
我只是搞砸了，还是有一种我可以采取的方法可以在所有相当现代的浏览器中工作？
I'm trying to create a layout something like this (you'll need to use your imagination):
A B
B
B
A is a piece of text, B is a piece of text whose left edge I would like to line up evenly with itself.
To further complicate matters, B is by default hidden, and should not be taken into account in setting up the page flow, but instead should appear when A has a mouseover on top of anything that happens to be where it appears. Thus:
A1
Asecond
on mouseover of A1 becomes:
A1 B1
AseB1
B1
Each AB row is contained in a div that has a fixed width. I don't know in advance the size of A, so I'd like B to simply take however much space is left in the div.
On Firefox, I simply made B have an absolute position, and everything was great, it worked exactly like I expected.
However, on IE8, B is taking a width equal to the containing div of fixed width, resulting in the div being overrun with overflow text due to the fact that B is already offset by the width of A. I can set the div to overflow:hidden, but this simply chops the text. Setting B to have a width:auto doesn't appear to do anything.
Am I just screwed, or is there an approach I can take that will work in all reasonably modern browsers?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
尝试一下：http://www.alistapart.com/articles/conflictingabsolutepositions/绝对位置冲突是我最喜欢的解决方法。
根据以下说明，在某些情况下可能无法在 IE6 中工作： http://fu2k.org/alex /css/frames/
Give this a shot: http://www.alistapart.com/articles/conflictingabsolutepositions/ Conflicting absolute positions is my favorite workaround.
May not work in IE6 under some circumstances, according to this note: http://fu2k.org/alex/css/frames/