HTML/CSS：保持元素定位窗口變化

Question

我對CSS很新，我花了很長時間試圖研究如何定位元素「三分之二」，以便即使窗口更改尺寸元素保持「在三分之二」。下面的第一張圖片是當瀏覽器完全打開時，第二張圖片是水平縮小的時候。我正在尋找這種方法，但我不知道該技術的名稱或做什麼（就像我說我真的很新）。我知道這些標籤使用了所謂的「關門」，但我更關心他們的定位。

例如，如果我想均勻地間隔出 承包如下三個要素，我將如何去實現上面這個？

代替：

Answer 1

檢查此解決方案。這是靈活的，如果有更多的菜單，它會自動適應它。

http://jsfiddle.net/geymU/

<div id="nav"> 
    <ul> 
    <li>Home</li> 
    <li>About</li> 
    <li>Address</li> 
    <li>Phone</li> 
    </ul> 
</div>​ 

CSS

#nav{ 
    background:#c1c1c1; 
} 
#nav ul{ 
    display:table; 
    width:100%; 
} 
#nav li{ 
    padding:5px; 
    display:table-cell; 
    background:#333; 
    border:1px solid; 
    color:#fff; 
}​ 

Answer 2

沒有看到實際的代碼，我會建議你相對單位申報的水平寬度，邊距和填充。這將是％或ems，而不是像素。

所以，在你的榜樣，

#element_2 { 
    margin-left: 45%; 
    } 
    #element_3 { 
    margin-left: 5%; 
    } 

有了相對單位，你將不得不做多一點嘗試和錯誤來獲得元素放置你怎麼想。

Answer 3

在你的照片看起來和backgroundImage（我認爲這是一個形象，因爲它不延伸到整個按鈕）只缺少

background-repeat: repeat-x; 

但是我在你的第二個例子可以很容易地看到存檔，如果你設置的第一個按鈕

float: left; 

，其餘按鈕

float: right; 

只是不要忘了

clear: both; 

在他們之後，櫃面你沒有從文件流（這是做什麼浮動）移除任何更多的元素。