[解決済み】CSSのフロートを1行にまとめるには？

質問

を使用して、同じ行に2つの項目を表示させたい。 float: left を左側のアイテムに使用します。

これだけでも問題なく実現できています。問題は、2つのアイテムに 滞在 同じ行に ブラウザのサイズを小さくしても . ほら...テーブルの時と同じようにね。

目標は、右側の項目が折り返さないようにすることです 何であれ .

CSS を使って、ブラウザに対して を含む div というように、ラップするのではなく float: right; の下にあります。 float: left; div ?

欲しいもの

                                   \
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          \
 |               |  |                        /
 |               |  |content stretching      \   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------\
                                             /

解決方法は？

フローティングをラップする <div> をコンテナに格納します。 <div> で、このクロスブラウザのmin-widthハックを使用しています。

.minwidth { min-width:100px; width: auto !important; width: 100px; }

あなた かもしれません を設定する必要がありますが、おそらく必要ないでしょう。

これは、以下の理由で動作します。

• は !important 宣言と組み合わせて min-width IE7+ では、すべてが同じ行に収まるようになりました。
• IE6には実装されていません。 min-width というバグがあります。 width: 100px が上書きされます。 !important の宣言により、コンテナの幅が100pxになる。