Question

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

Answer 1

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

在演示1中，无论屏幕尺寸/分辨率如何，div都将始终贴在屏幕的左上角。

<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; }

这个将始终坚持右手边有一些余量

DEMO 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/中预览

工作CSS定位不依赖于屏幕尺寸

2 个答案: