216

float: left左のアイテムを使用して、同じ行に2つのアイテムを配置したい。

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

目標は、右のアイテムが何があってもラップしないようにすることです。

CSS を使用してブラウザに、内容をdivラップするよりも引き延ばして、divfloat: right;がfloat: left; div

私が欲しいもの:

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

10 に答える 10

132

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

.parent {
     white-space: nowrap;
}

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

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

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

于 2012-04-02T14:26:44.120 に答える
77

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

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

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

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

  • この!important宣言は、min-widthIE7+ ですべてが同じ行にとどまるようにします。
  • IE6 では実装されていませんが、宣言をオーバーライドしてコンテナの幅が 100px になってしまうmin-widthバグがあります。width: 100px!important
于 2008-11-05T17:50:24.273 に答える
15

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

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

于 2011-04-05T05:10:09.490 に答える
11

解決策 1:

display:table-cell (広くサポートされていません)

解決策 2:

テーブル

(私はハックが嫌いです。)

于 2008-11-08T07:21:16.137 に答える
8

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

于 2008-11-05T23:15:28.253 に答える
4

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

私の経験ではCSSが難しいことがよくありますが、自分のやりたいことを実行する方法がわからないのは、マークアップに関してトンネルビジョンに巻き込まれたためです（「どうすればこれらを作成できますか？要素はこれを行いますか？ "）戻って、それが何を達成する必要があるのか​​を正確に調べて、それを容易にするためにhtmlを少し作り直すのではなく。

于 2008-11-05T17:54:47.870 に答える
2

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

于 2010-07-26T16:03:39.153 に答える
-3

これを回避する方法は、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());
});
于 2013-05-18T20:38:33.473 に答える