web-dev-qa-db-ja.com

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

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

これを単独で達成するのに問題はありません。問題は、同じ行でstayに2つの項目を指定することですブラウザのサイズを非常に小さくした場合でもです。ご存知のように...テーブルでの様子が好きです。

目標は、右側のアイテムが折り返されないようにすることです何があっても。

CSSを使用してブラウザに指示する方法含むdivをラップするよりもfloat: right; divがfloat: left;div？

私が欲しいもの：

                                   \
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          \
 |               |  |                        /
 |               |  |content stretching      \   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------\
                                             /
csscss-floatcss-tablesstretching
214
Jiaaro

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

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

may「オーバーフロー」も設定する必要がありますが、おそらく設定する必要はありません。

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

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

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

.parent {
     white-space: nowrap;
}

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

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

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

130
Innovaat

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

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

15
Czar

解決策1：

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

解決策2：

テーブル

（ハッキングが嫌いです。）

10
pkario

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

8
Steve Clay

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

多くの場合、CSSの経験が困難であるため、自分が望むことを行う方法がわからない理由は、マークアップに関してトンネルビジョンに巻き込まれていることが原因であることがわかります（ these elements do this？ "）戻って正確に何を達成する必要があるかを調べるのではなく、それを容易にするためにhtmlを少し修正する必要があります。

4
glenatron

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

2
Rob Elliott

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

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

パディングと境界線が幅に追加されるのを防ぐため、たとえば33.33333％の幅を持つ3つの要素

2
Nebojsha

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

0
Bruce Allen