5


1

フローティングdivが次の行に折り返されないようにします

まず最初に、私のサイトです。

だからここに私の問題があります。 ページの中央にある仕切りバーの下に、3つの列があります。1つはフォーム、1つはテキスト、1つはリンクです。 ここで、ウィンドウのサイズをわずかに小さくすると、右のdivが次の行にドロップダウンします。 とにかくそれを表示しないだけですか? だから、それらのdivは収まらない点まで調整(私は液体のレイアウトを持っています)し、次にdivを次の行に折り返すのではなく、表示されませんか?

これが理にかなっていると思います。 任意の助けは大歓迎です。

4 Answer


8


また、CSSのみでそれを達成することもできます。

次のCSS属性を#row4に割り当てるだけです。

#row4 {
    min-width:1202px; /* the exact value depends on the sum of the width of your 3 column boxes */
    overflow:hidden;
}

これは意図したソリューションとは少し異なります。ウィンドウのサイズを小さくすると、右側のボックスが部分的に表示されたままになり、すぐに完全に消えないためです。

IE6ではmin-widthが機能しないことに注意してください。 ただし、古いIEをサポートする必要がある場合は、min-widthプロパティをエミュレートする方法がいくつかあります。


2


最小幅が設定されたラッパーdivを提供し、水平スクロールバーが小さすぎる場合は強制的に使用することができます。 ラッパーdivの良いところは、max-widthを指定して、超巨大なモニターで不安定になるのを防ぐことができることです。

私は水平スクロールバーのファンではありませんが、コンテンツを完全に削除するよりも優れています。


2


OK、これがあなたがすべきことです

親divに3つの浮動ディビジョンをすべてラップします。次のようなものです。

    ......
    ......
    .....

あなたの問題を解決するために、次のように「親」divに固定高さを与えます

#parent { height:400px;clear:both; }


1


Javascriptを使用してビューポートの幅を取得し、ラップしているdivの表示プロパティをdisplay:noneに変更して、ブラウザーの幅が小さすぎる場合に表示されないようにする必要があります。