2

おそらく、今日最も珍しい質問のタイトルです!

私は信じられないほどの困難を抱えている自分のサイトで何かを達成しようとしています.

次の点を考慮してください。

1-----------------------------------------------------------------------+
|2--------+ 3---------------------+ 4-------------+                     |
||        | |                     | |             |                     |
|| a-+    | | b-+ c-+ d-+ e-+ f-+ | | g-+ h-+ i-+ |                     |
|| | |    | | | | | | | | | | | | | | | | | | | | |                     |
|| +-+    | | +-+ +-+ +-+ +-+ +-+ | | +-+ +-+ +-+ |                     |
||        | |                     | |             |                     |
|+--------+ +---------------------+ +-------------+                     |
+-----------------------------------------------------------------------+

|<--------------- SCREEN WIDTH --------------->|

必要なレイアウトに関連する数字と文字に基づいて、私が達成しようとしていることは次のとおりです。

1 = 固定の高さで、画面の幅よりも広くない 1 つの「コンテナー」 (画面の中央に収まるように余白などを取ります)。

この「コンテナ」には、ユーザーがコンテンツをスクロールできるように、水平方向のみのスクロール バーも必要です。

このコンテナ内には、2、3、4 のラベルが付いた 3 つのコンテナがあります。これらのサイズは異なりますが、スクロールバーは含まれませんが、各コンテナが大きくなるにつれて、コンテナ 1 にとどまる必要があり、垂直方向にスクロールすることはありません。

2、3、4 の範囲内で、追加のコンテナー (ウィジェット) を挿入して、その親コン​​テナーを大きくすることができます。

私のレイアウトでわかるように、コンテナ 2 には「ウィジェット」a があり、コンテナ 3 にはウィジェット b、c、d、e、f があり、コンテナ 4 にはウィジェット g、h、i があります。

私が管理したすべてのものを追加するjQuery/Javascriptは問題ありませんが、実際のCSSと「レイアウト」には問題があります。

コンテナー 1 を作成した'white-space:nowrap;'ため、これにより垂直スクロールが消去され、同様の jQuery を使用$('#containerA').append([something]);して、それぞれのコンテナー (2、3、または 4) に「ウィジェット」も追加されます。

現在、私のHTMLは次のとおりです。

                    <div id="divfieldWidgets" style="width:auto;margin-top:40px;background-color:#FFFFFF;border:1px solid gray;height:320px;left:50px;right:50px;-moz-box-shadow: 4px 4px 2px #888;-webkit-box-shadow: 4px 4px 2px #888;box-shadow: 4px 4px 2px #888;overflow:hidden;margin-left:60px;margin-right:60px;overflow:scroll;">
                    <div style="white-space:nowrap;float:left;">
                        <div id="divFieldWidgetsProductAndMarketing" style="background-color:#FFEEEE;height:100%;width:auto;white-space:nowrap"></div>
                        <div id="divFieldWidgetsYears" style="background-color:#EEFFEE;height:100%;width:auto;white-space:nowrap"></div>
                        <div id="divFieldWidgetsCalculations" style="background-color:#EEEEFF;height:100%;"></div>
                    </div>
                </div>

これは、いくつかの部分で私が望むものを達成します (つまり、MAIN コンテナーのみの水平スクロールと、「ウィジェット」が追加されているときのコンテナー 2、3、および 4 のサイズ変更) が、ご覧のとおり、すべて一緒ではありません。

これについての助けを本当に感謝します。

ティア

4

3 に答える 3

1

float:leftdiv を水平方向に拡大し、垂直スクロールを回避する場合は、水平幅が固定された大きな div の内側をラップする必要がありますdivs。

次の手順を実行することで、達成したいことに近づくことができます。

  • 幅が非常に広いコンテナ 1 を作成します。これを行うには、幅を静的に指定するか、内側の div の幅を計算し、javascript を介してそれに割り当てます。

  • さて、あなたの内側のdiv、つまり 2,3,4 はwidth:autoandfloat:leftになります (4float:rightも同様です)

  • 繰り返しますが、内側の div には、水平方向に配置したい div、つまりコンテナ 3 の b、c、d、e、f があります。それらを水平方向に配置したいので、3 に static を与える必要があります。幅、およびこれらの b、c、d、e、fawidth:auto

  • 2、3、および 4 に指定する必要がある幅がわからないため、JavaScript を使用してそれぞれの内部の個々の div の幅を計算し、合計をそれらに割り当てる必要があります。すなわち

    width(3) = width(b) + width(c) + width(d) + width(e) + 30px = (コンテンツ div の実際の合計より少し余分に)

したがって、基本的なポイントは、水平方向の配置で垂直方向のスクロールがない場合、親コンテナーは固定幅にする必要があるということです。

このフィドルを参照してください。コンテナに静的な幅を既に提供しています。あなたはjavascriptコードを介してそれを取得しています。

また、オーバーフロー プロパティを見てください。これとこれを通り抜けます

于 2013-03-13T12:33:48.007 に答える
-2

親の div は 100%、子の div は左にフロートする必要があると考えています。オーバーフロー スクロールを水平に保ちますが、垂直スクロールは許可しません。

于 2013-03-13T12:06:09.163 に答える