5

ブラウザー ウィンドウに十分な垂直方向のスペースがある場合、垂直方向に積み重ねる必要がある 2 つの非常に狭い (幅:400 ピクセル) div があります。ブラウザーの高さが小さすぎて、右側に十分なスペースがある場合、「下部 div」は上部 div の右側にフロートする必要があります。

ある意味では、「float:left」の反対を求めています。float: ブラウザ ウィンドウに十分な水平スペースがある場合は div を水平方向に左揃えし、下に使用可能なスペースしかない場合は他の div の下にフロート div のみを配置します。

ご提案ありがとうございます。

4

2 に答える 2

8

必要なブラウザサポートのレベルによっては、単純なメディアクエリで問題が解決する場合があります。

<!doctype html>
<html>
    <head>
        <style>
            /* SET THE DEFAULT RULES FOR SHORT SCREENS */
            .bottom-floaty {
                height:200px;
                width: 400px;
                margin: 15px; padding: 10px;
                outline: 1px dashed #aaf;
                }
            /* HERE FOLLOWS THE MAGICAL MEDIA QUERY FOR TALL SCREENS */
            @media all and (max-height: 500px) {
                .bottom-floaty { float:left; }
            }
        </style>
    </head>
    <body>
        <div class="bottom-floaty">
            I'm a sometimes floaty div
        </div>
        <div class="bottom-floaty">
            I'm also a sometimes floaty div
        </div>
    </body>
</html>

これが私が見た効果です： 背の高い窓に 短いウィンドウで

CSS3メディアクエリを使用すると、ビューポートの高さに基づいて任意のルールcssを設定できます。w3cには、メディアクエリに関する多くの情報があります。

ビューポートの高さに関する関連スニペット：

「高さ」メディア機能は、出力デバイスのターゲット表示領域の高さを表します。連続メディアの場合、これは、レンダリングされたスクロールバー（存在する場合）のサイズを含むビューポートの高さです。ページメディアの場合、これはページボックスの高さです。

指定は負にすることはできません。

Mozilla Developer Networkにもう少しアクセスしやすいと思うことがありますが、この場合、基本的に同じ情報を提供します。

メディアクエリをレンダリングできない古いブラウザをサポートする必要がありますか？特にjQueryのようなライブラリを使用すると、javascriptポリフィルを作成するのはかなり簡単なはずです。

編集

私はあなたの問題により密接に一致するように私のコード例を修正しました。あなたはコメントしました：

Jashwant：divを他の下に置くことが常に優先されます。したがって、右側にスペースがあり、下部にはスペースがない場合にのみ、div2はdiv1の右側に配置する必要があります。–ジョナス

また、例のように幅を400pxに設定しました。

これで、画面が短すぎて垂直にできない場合にのみ左に浮き、右側に両方を収めるのに十分なスペースがあります。それ以外の場合は、常に垂直です。

于 2012-06-08T14:33:11.483 に答える
3

プロパティを使用したくない場合float:left;は、すべての DIV が新しい行に下がります。float left プロパティを使用します。改行が必要な場合は、使用するだけですclear:both;

于 2012-06-08T12:55:58.750 に答える