html - 画面サイズに依存しないCSSポジショニングの動作

Question

さまざまなサイズの画面を使用している人々に関連するCSSで要素を配置する際に、かなりの問題が発生しました。ビューポートがどれほど大きくても画面上で要素の位置を維持できるように要素を配置するための防弾方法は何ですか？

Answer 1

ここに2つの簡単な例があります。

デモ1では、画面サイズ/解像度に関係なく、divは常に画面の左上に固定されます。

デモ1

<div id="test">This div will always appear on top left by default regardless of screen size.</div>​
#test{ width:150px; height:150px; background-color:#666; }​

これは常にある程度のマージンを持って右側に固執します

デモ2

<div id="test">This div will always appear on right hand with 100 margin.</div>​
#test{float:right; margin-right:100px; width:150px; height:150px; background-color:#666; }​

Answer 2

ラップされたdiv。例えば：

html：

<div class="wraped">
  <div class="someDiv">
      Hi
  </div>
  <div class="someDiv">
    Hi reloaded
  </div>
</div>​

css：

​.wraped {
  background:grey;
  width:500px;
  height:300px;
  margin:auto                
 }
 .someDiv  {
   width:230px;
   text-align:center;
   padding:10px;
   background:#ccc;
   outline:1px solid black;
   float:left;
  }

これはhttp://jsfiddle.net/wandarkaf/2VVcm/でプレビューできます </p>