5

これを見てください:(シナリオ1）

#container {
    height:150px;
    border:1px solid pink;
    width:1100px;
}
#widget {
    display:inline-block;
    width:100px;
    height:100px;
    background-color:red;
}​

http://jsfiddle.net/DQFja/1/

とてもシンプルです。その中に他のdivの束があるdiv。親divの幅は約1000ピクセルに固定されており、子divはdisplay：inline-block;に設定されています。ブラウザウィンドウを親よりも小さくすると、スクロールバーが表示され、スクロールして残りの部分を表示できます。

これを見てみましょう:(シナリオ2）

#container {
    height:150px;
    border:1px solid pink;
    float:left;
}
#widget {
    display:inline-block;
    width:100px;
    height:100px;
    background-color:red;
}​

http://jsfiddle.net/zZRq7/

親と子は同じですが、親の幅は、配置するdivの子の数によって動的に決定されます。これはダンディです。ただし、ブラウザウィンドウを小さくすると、親divがウィンドウと同じ幅になり、子が折り返され始め、親が高くなります（固定の高さを設定していても！）

divシナリオ2のように、親の両方の幅を動的にするにはどうすればよいですか。また、ブラウザーウィンドウが小さくなっても、スクロールバーを取得できるように、その形状/高さ/幅を維持しますか？

4

2 に答える 2

8

Min-width行く方法です：

#container {
    height:150px;
    border:1px solid pink;
    min-width:1100px; // set the minimum width of the container to 1100px
    width: 100%; // if the window size is bigger than 1100px, then make the container span the entire window
}

ここで実際の例を参照してください。

達成するハックな方法はwhite-space、次のようにプロパティを使用することです。

#container {
    border:1px solid pink;
    white-space: nowrap;
}
#widget {
    display: inline-block;
    width:100px;
    height:100px;
    background-color:red;
}​

ここで実際の例を参照してください

于 2012-11-14T22:16:46.810 に答える
2

空白行を含めるように回答を更新します。

#container {
    height:150px;
    border:1px solid pink;
    white-space:nowrap;
    overflow:auto;
}

http://jsfiddle.net/DQFja/3/

于 2012-11-14T22:14:30.563 に答える