14

2つのアイテムを保持するコンテナdivがあります。a.buttonとa.boxにテキストが含まれています。.button最初に来て、右に浮かんでいます。.boxフロートがありません[これは制約です。フロートがないことに依存する他の同様の構造のため、左にフロートできません]。新しいブロックフォーマットコンテキストを確立する必要があります.box。overflow: hidden;これにより.box、前のフロート要素「まで100％」にまたがることができます.button。

.outer-containerこれらすべてを収容し、右に浮かんでいます。

http://jsfiddle.net/6qAwA/5/

Chrome（26.0.1410.12 beta-m PC、25.0.1364.99 Mac）、Safari（6.0.2 Mac）、およびIE8-9では、これは希望どおりに機能します。.boxのテキストは1行にとどまり、.outer-container右フロートのため、正確に必要なサイズになります。ただし、Firefoxでは、テキストは別の行に分割されます。

代わりに左にフロートした場合にも同様の問題が見つかります.button-Firefoxを除くすべてで望ましい動作が得られます。

私はこのFirefox16.0.1と19.0をPCで、18.0.1と19.0をMacで見ました。これはバグですか？

4

4 に答える 4

42

私は今日この問題に遭遇しました。フローティングノードdisplayはFirefoxに設定した後でも、Firefoxでのみ改行されます。そのinline-block理由は、コンテナノードのスタイル設定がにwhite-space設定されていたためnowrapです。したがって、コンテナノードwhite-spaceでの値をにリセットすると、この問題は解決しました。normal

于 2013-08-07T11:02:43.457 に答える
5

display: inline-block;に追加.box：

デモ

于 2013-02-27T01:32:32.167 に答える
0

実際、 http：//jsfiddle.net/Volker_E/x5rPd/divのようなソリューションを使用する場合は、目的の動作に 1秒も必要ありません。

于 2013-02-27T02:16:17.593 に答える
0

white-space: normal私のためにトリックをしませんでした。うまくいったwhite-space: nowrap;のはダイレクトテキストコンテナでした。

于 2014-07-30T12:20:53.103 に答える