html - HTML/CSS：通过窗口更改保持元素定位

Question

我对 CSS 很陌生，我花了很长时间试图研究如何将元素定位为“三分之一”，这样即使窗口改变尺寸，元素也能保持“三分之一”。下图第一张是浏览器全开时，第二张是横向收缩时。我正在寻找这种方法，但我不知道该技术的名称或做什么（就像我说我真的很新）。我知道标签正在使用所谓的“关门”，但我对它们的定位更感兴趣。

例如，如果我想要三个不均匀分布的元素以如下方式收缩，我将如何超越实现这一目标？

代替：

Answer 1

在没有看到实际代码的情况下，我建议您使用相对单位声明水平宽度、边距和填充。那将是 % 或 ems，而不是像素。

所以，在你的例子中，

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

对于相对单位，您将不得不进行更多的反复试验才能使元素按您想要的方式放置。

Answer 2

检查此解决方案。这是灵活的，如果有更多菜单，它会自动适应它。

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 3

在您的图片中，它看起来像背景图像（我假设它是图像，因为它没有延伸到整个按钮）只是缺少一个

background-repeat: repeat-x;

但是，如果您将第一个按钮设置为

    float: left;

和其余的按钮

    float: right;

只是不要忘记

    clear: both;

在它们之后，以防您没有从文档流中删除更多元素（这就是 float 所做的）。