2011-12-29 22 views
1

絶対配置を使って完全なアライメントで4つのボックをセットアップしました。私の理解は、これはあなたが基本的に各ブロックのx、y位置を上、左、親要素が原点であるように設定しているということです。私は期待どおりに働いていたし、素晴らしいことがうまくいったことに驚いた。私はIE 9のズームボタンを押すよりも、y座標はそこに維持されていますが、xコリダナートは親要素を過ぎても左にシフトしています。私は負の値を指定しなかった。ズーミングが絶対配置に影響するのはなぜですか?要素のセットを絶対位置に配置する方法は?

+0

問題を引き起こしているのはズームだけではありません。ブラウザウィンドウのサイズを変更すると、興味深い結果もいくつかあります。 –

答えて

0

この権利を行うには、多くの方法があります...私がやったことは、xy座標平面を設定し、マージンや上と下の属性を使って要素を配置することです。これを行うために、親ディビジョンを相対位置に設定して、それを「原点」として登録し、4つの四角形divを絶対配置として設定します。これはうまくいく。私が何をしているのかは、あなたの絶対配置された要素の親divを非静的配置に設定しなければならないということです。

1

ズームは、これらの要素のサイズを変更しますが、位置は変更しません。しかし、私はそれを防ぐ方法を知らない、私はそれがブラウザによって引き起こされるので、あなたはそれに対して何もすることはできないと思う。

唯一の可能性はJavaScriptでサイズをチェックしている可能性がありますが、多分JSでこれを認識することは可能ですが、それは非常に難しいでしょう。とにかく、ズームしながら動作することは重要ですか?

-1

テーブルを避けてはいけません。左から右へ4ブロック、上から下に並べて、テーブルで一番簡単です。あなたは浮動小数点の左と右とそのような迷惑メールでdivを使用することができますが、テーブル内のセルは一直線からずれることはありません。

+0

原則として私はあなたに同意しますが、この場合私はテーブルが必要ではないと思います。また、 'float:left;の代わりに' display:inline-block; 'を使ったほうがずっと良い運がありました。 –

+0

http://www.alistapart.com/articles/journey/ – Wex

1

現在、絶対配置要素は、<body>タグの左/右の位置(常に0px/0px)に対して配置されています。

しかし、中央に配置されたレイアウトはmargin-left: auto; margin-right: auto;であり、絶対配置された要素を完全に整列させたいとします。

ズームを使用してページを50%小さくするとします。これにより、leftの位置プロパティが50%減少し、margin:auto;要素のwidthが50%減少します(左右の余白がになり、幅の変更が何であってもになります)。

だから、小さいページをズームすると、中心要素大きなに余裕を作るが、それは絶対的な位置が小さいを調整します。

完全に整列させるには、要素に対して絶対配置された要素をmargin-left: auto;で作成する必要があります。私はこれを行うだろう、あなたの具体的な例では

div#Ab1 
{ 
    position: relative; 
} 

div#Ab1_2 
{ 
    position: absolute; 
    top: 80px; 
    right: 0px; /* note: setting a right position, not a left position */ 
} 

/* and do the same for div#Ab1_4 and div#Ab1_4_under */ 

ん意味をなさない?

PS:アップロードしたときにローカルで作業して壊れた理由は、そのページのデフォルトのズームレベルでページを表示していない可能性があります。

1

あなたの4つのブロックは高さと幅が同じである場合は、あなたがこれを行うことができます:

div.block { height: 200px; width: 400px; float: left; } 

その後側だけで二つのブロックの側面を可能に容器に入れます。

例フィドル: http://jsfiddle.net/u5xVa/

関連する問題