次のようなレイアウトを作成しようとしています (想像力を働かせる必要があります)。
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 をオーバーフローに設定できます。 :hidden ですが、これは単純にテキストを切り刻みます。B に width:auto を設定しても、何も行われないようです。
それとも、最新のすべてのブラウザーで機能するアプローチがありますか?