html - 工作 CSS 定位不取决于屏幕大小

Question

我在使用 CSS 定位元素时遇到了很多问题，这些问题与使用不同尺寸屏幕的人有关。什么是定位元素的防弹方法，以便无论视口有多大，它们都可以保持在屏幕上的位置？

Answer 1

我们这里有两个简单的例子。

在演示 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>