2

div が言う場合

<div style="position:absolute;top:0%;left:94%;width:40px;height:40px;"/>

異なる画面解像度で表示すると、94% が右にスライドし始めますが、これは正常な動作です。

div はドキュメントに対して相対的であるため、ウィンドウのサイズが変更されたときに、ウィンドウと一緒に移動したいと考えています。

私が理にかなっていることを願っています。私が今持っているように、それは私が置いた場所の近くにとどまっていますが、画面が大きくなるか、ドキュメントがより高い解像度で表示されると、シフトし始めます.

質問: div を絶対にパーセントで配置し、画面サイズ/解像度が変更されたときに正しい位置に保つにはどうすればよいですか。

編集： これが私がやろうとしていることです。ユーザーがツール ボックスからいくつかの項目を選択し、Visual Studio のようなウィンドウにドラッグ アンド ドロップできるアプリケーションを作成していますが、結果は HTML ページのフォームではありません。私はこれをすべて機能させており、うまく機能しています。私の問題は、さまざまな画面と解像度でテストを開始したときに始まりました。最終結果は、ユーザーが html ページの作成に使用した画面とは常に異なります。ページ内のすべてのものは、相対的なメイン コンテンツ領域を除いて絶対的に配置され、絶対的に配置されたすべての項目が含まれます。

私が試したのは、画面上のアイテムの左と上の値の割合でした。それが私の最初の質問につながりました。自分の値を計算するという提案で、これを試しました

var currH = $(window).height();
var currW = $(window).width();

var rW = currW / OrgWidth; //Orignal Width of the window when the item was placed

var rH = currH / OrgHeight; //Orginal height of the window when the item was placed 

var x =$("#Button_Tools").offset().left * rW;
var y =$("#Button_Tools").offset().top * rH;

$("#Button_Tools").css("left", x.toString() + "px");
$("#Button_Tools").css("top", y.toString() + "px");

ウィンドウが最初に読み込まれたときにこれを計算し、パーセント値が移動したのとまったく同じ場所にボタンを移動します。

私は何を間違っていますか？すべてのテイカー。

4

1 に答える 1

2

div を絶対にパーセントで配置して、すべての画面で同じように動作することを期待することはできません。パーセンテージを使用しているため、値は画面のサイズに比例します。1000 の 94% は 1500 の 94% とは異なります。

次のように、左の代わりに右の属性を設定できます。

<div style="position:absolute;top:0%;right:20px;width:40px;height:40px;"/>

ページの現在の幅に基づいてページ読み込みイベントでこの値を計算することもできます。これにより、ウィンドウのサイズが変更されても位置が同じになることが保証されます。

于 2013-05-23T22:37:40.637 に答える