CSSフロートを1行に保つにはどうすればよいですか？

float: left左側のアイテムに使用している同じ行に2つのアイテムが欲しいです。

私はこれを一人で達成するのに問題はありません。問題は、私は2つの項目がしたい、あるとどまる同じ行にあなたは非常に小さく、ブラウザのサイズを変更した場合でも。ご存知のように...テーブルでどうだったか。

目標は、右側のアイテムが何に関係なくラッピングしないようにすることです。

divがの下にくるようにラップするのではなく、コンテナをストレッチするdivことをCSSを使用してブラウザに伝える方法float: right;はfloat: left; div？

私が欲しいもの：

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

このクロスブラウザーの最小幅ハックを使用<div>するコンテナーにフローティングsをラップします<div>。

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

あなたはありもセット「オーバーフロー」する必要があるが、おそらくありません。

これは機能します：

• !important組み合わせ宣言、min-width原因のすべてがIE7 +で同じ行に滞在します
• IE6はを実装していませんが、宣言min-widthをwidth: 100pxオーバーライドして!important、コンテナーの幅が100pxになるというバグがあります。

別のオプションは、フローティングではなく、空白のプロパティnowrapを親divに設定することです。

.parent {
     white-space: nowrap;
}

空白をリセットし、インラインブロック表示を使用して、divが同じ行に留まるようにしますが、幅を指定することもできます。

.child {
    display:inline-block;
    width:300px;
    white-space: normal;
}

ここにJSFiddleがあります：https ://jsfiddle.net/9g8ud31o/

フローターの幅とマージンの合計よりも大きい最小幅のdivでフローターをラップします。

ハッキングやHTMLテーブルは必要ありません。

解決策1：

display：table-cell（広くサポートされていません）

解決策2：

テーブル

（私はハックが嫌いです。）

別のオプション：右の列をフロートさせないでください。フロートを超えて移動するには、左マージンを与えます。IE6を修正するにはハックが必要ですが、それが基本的な考え方です。

浮動ブロックレベルの要素がこの問題の最善の解決策であると確信していますか？

私の経験でCSSの難しさと、多くの場合、それはどのように私は作ることができる」思考（私は私がしたいことをする方法を見ることができない理由は、私は私のマークアップに関してトンネルビジョンに巻き込まれているということであることが判明し、これらを要素はこれを行いますか？ "）戻ってそれが正確に何を達成する必要があるかを調べるのではなく、おそらくそれを容易にするためにhtmlを少し修正します。

この問題にはテーブルを使用することをお勧めします。私は同様の問題を抱えていますが、テーブルが一部のデータを表示するためだけに使用されており、メインページのレイアウトではない場合は問題ありません。

この行をフロート要素セレクターに追加します

.floated {
    float: left;
    ...
    box-sizing: border-box;
}

それはパディングとボーダーが幅に追加されるのを防ぐので、たとえあなたが持っていたとしても、要素は常に並んでいます 幅33.33333％の3つの要素

ユーザーがウィンドウサイズを水平方向に縮小し、これによりフロートが垂直にスタックする場合、フロートを削除し、2番目のdiv（フロートでした）でmargin-top：-123px（あなたの値）とmargin-left：444px（あなたの値）を使用してdivがフロートで表示されるように配置します。このようにすると、ウィンドウが狭くなると、右側のdivはそのまま残り、ページが狭すぎてそれを含めることができないと消えます。...（私にとって）これは、ユーザーがブラウザウィンドウを狭めたときに、右側のdivが左側のdivの下に「ジャンプ」するよりも優れています。

これを回避する方法は、jQueryを使用することでした。私がこのようにした理由は、AとBがパーセント幅であるためです。

HTML：

<div class="floatNoWrap">
    <div id="A" style="float: left;">
        Content A
    </div>
    <div id="B" style="float: left;">
        Content B
    </div>
    <div style="clear: both;"></div>
</div>

CSS：

.floatNoWrap
{
    width: 100%;
    height: 100%;
}

jQuery：

$("[class~='floatNoWrap']").each(function () {
    $(this).css("width", $(this).outerWidth());
});