工作的CSS定位不依賴於屏幕尺寸

我已經有相當一些與CSS定位元素相關的問題，使用不同大小的屏幕的人。什麼是防彈的方式來定位元素，使他們保持他們在屏幕上的位置，無論視口有多大？工作的CSS定位不依賴於屏幕尺寸

2012-11-13 Simon Carlson

使用固定的寬度，例如像素代替％。 –

這就是我一直在嘗試做的事情，但它仍然對我沒有任何意義。假設我有一個視角爲1366px x 636px的屏幕，就像我現在做的那樣，另一個屏幕的視口爲800px x 600px。如果我將一個100px的元素放在右邊，它將不會出現在兩個屏幕上的相同位置，是不是？ –

當然，發佈一個例子 –

我們有2個簡單的例子，在這裏預覽此。

在演示1中，無論屏幕大小/分辨率如何，div都將始終保持在屏幕的左上角。

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

這一次會一直堅持下去的右手邊有一定的餘量

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

來源

2012-11-13 16:05:23

wraped 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/

來源

2012-11-13 15:09:01 wandarkaf

工作的CSS定位不依賴於屏幕尺寸

回答

相關問題