0

最初に、少し背景を説明させてください。div の配置に % を使用してレスポンシブ ページを作成しています。これにより、ユーザーはアイテムを好きな場所にドラッグ アンド ドロップできます。この問題は、ユーザーがオブジェクトをページの端近くに配置したときに発生します。ブラウザのサイズを変更すると、画像がページからはみ出し始め、途切れます。

    #div1 
    {
    overflow: hidden; 
    right: <?php variable>;
    bottom: <?php variable>;
    }

    #div2 
    {
    overflow: hidden; 
    left: <?php variable>;
    top: <?php variable>;
    }

私が試してみたいのは、パーセンテージがページの端まで配置を制御できるようにすることです。次に、変数を 10px などにハードコードして、ページから消えないようにしたいと思います。

これを javascript(if statement('s)) で行うことを考えましたが、もっと簡単な方法 (css プロパティ) があるのではないかと考えました。どんな助けや提案も大歓迎です。

ありがとう、

ロブ

4

1 に答える 1

0

JavaScript を使用する場合は、ブラウザのサイズ変更をトリガーする別の関数が必要です。

window.onresize = function(event) {
    //your code here
}

または、人気のある jQuery を使用している場合

$(window).resize(function(){
    //your code here
});

同じです。

CSS でハードコーディングしたい場合は、@media クエリを使用します。

@media(max-width:767px) { /*or whatever you want to use to trigger the css that will be used after browser size fits your problem */
    .myImage {left:10px;top:10px;}
}

@media で使用できるものの詳細については、 http://www.w3.org/TR/css3-mediaqueries/ を参照してください。

あなたが私に尋ねると、JavaScriptを使用してはるかに堅実なソリューションを実現できると思います.jsを使用して要素をドラッグしていると思われるので、サイズ変更と再配置にもそれを使用してください.

于 2013-06-14T14:51:04.520 に答える