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

StackOverflow https://stackoverflow.com/questions/266015

質問

左側のアイテムにfloat: leftを使用して、同じ行に2つのアイテムが必要です。

これを単独で達成するのに問題はありません。問題は、ブラウザのサイズを非常に小さくした場合でも、2つのアイテムを同じ行にそのままにしておくことです。ご存知のように...テーブルを使用した場合のように。

目標は、右側のアイテムがどのような場合でもラップしないようにすることです。

CSSを使用してブラウザーに、div divがfloat: right; float: left;の下にくるように、含まれている<=> をラップするよりもむしろストレッチしたいことを伝える方法

欲しいもの：

                                   \
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          \
 |               |  |                        /
 |               |  |content stretching      \   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------\
                                             /
役に立ちましたか？

解決

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

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

は、<！> quot; overflow <！> quot;おそらくそうではありません。

これは、次の理由で機能します。

  • min-width宣言をwidth: 100pxと組み合わせることにより、IE7 +ではすべてが同じ行にとどまります
  • IE6は<=>を実装していませんが、<=>が<=>宣言をオーバーライドし、コンテナーの幅が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を修正するには1〜2個のハックが必要ですが、それが基本的な考え方です。

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

多くの場合、CSSの経験上、私が望むことを行う方法がわからない理由は、マークアップに関してトンネルビジョンに巻き込まれていることが原因であることがわかります（<！> quot;どうすればこれらの要素を this にすることができますか？<！> quot;）戻って正確に何を達成する必要があるかを見直すのではなく、それを容易にするためにHTMLを少し。

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

この行をフローティング要素セレクターに追加します

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

パディングとボーダーが幅に追加されるのを防ぎます。 33.33333％の幅を持つ3つの要素

ユーザーがウィンドウサイズを水平方向に縮小し、フロートが垂直にスタックする場合、フロートを削除し、2番目のdiv（フロート）でmargin-top：-123px（値）およびmargin-left：444px（your値）divをフロートで表示されるように配置します。 このようにすると、ウィンドウが狭くなると、右側のdivはそのまま残り、ページが狭すぎて含めることができなくなると消えます。 ...これは（私にとって）右側のdiv <！> quot; jump <！> quot;ユーザーがブラウザウィンドウを狭めると、左側の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());
});
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top