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; 

在他们之后，柜面你没有从文件流（这是做什么浮动）移除任何更多的元素。