1

簡略化すると、A、B、Cの3つの要素があります。BとCはdivに一緒にあります。十分な水平方向のスペースがある場合（ブラウザウィンドウの幅が十分に広い場合）、次のように表示します

A B C

これまでのところ些細なことです。ウィンドウが小さくなった場合は、次のように折り返します。

A
B C

私はdivにaを与えることでこれを解決しましたstyle.whiteSpace = "nowrap"。問題は、BCを表示するのに十分なスペースがない場合でも、BCがラップしなくなることです。ウィンドウがさらに小さくなったとき、これを次のように表示したい

A
B
C

だから私が探しているのは、回避する余地がある場合はラッピングを防ぎ、そうでない場合はラッピングを許可する、よりソフトなバージョンの「nowrap」です。

編集：

返信はすべてをフロートにすることで上記を解決しました：http：//jsfiddle.net/nF4k5/6/

これは、私の単純化が行き過ぎであることに気づきました。実際、私のアプリケーションでは、Aはテキストであり、それ自体が折り返されているため、幅全体を埋めることがあります。BとCは、a）テキストAの最後の行に一緒に表示されるか、b）新しい行に、またはその行が短すぎる場合にc）2行に表示される単一の単語として想像できます。

いろいろ試してみる例を作成しました：http：//jsfiddle.net/nF4k5/5/

画面がさらに小さくなると、次のようになります。

A A A A B C

A A A A
B C

A A A
A B C

A A
A A
B C

A
A
A
A
B
C

BC周辺のdivにnowrapを追加するなど、Aに変更を加える必要がない場合は、特に便利ですが、機能しません。

編集：解決策：BとCのラッパーにwhiteSpace = "nowrap"を与える代わりに、display="inline-block"を与えます。

4

2 に答える 2

1

AをdivXに、BとCをYに配置します。XとYを左にフロートします。幅がX+Yの幅よりも小さい場合は常に、Yが下がります。

Yの内側：Bをdiv sonOfXに入れ、CをsonOfYに入れ、FloatsonOfXとsonOfYを左に置きます。幅がsonOfX+sonOfYの幅よりも小さい場合は常に、sonOfYがダウンします。

どうぞ-http://jsfiddle.net/nF4k5/

これでうまくいくはずです：http：//jsfiddle.net/nF4k5/7/新しい質問の場合

于 2012-02-02T16:54:28.043 に答える
0

これらは要素だとおっしゃっていたので、HTML要素を意味していると思いますよね？その場合は、それらを浮かせてください。それがフロートの自然な振る舞いです。

于 2012-02-02T16:37:12.337 に答える