javascript - 如何将div元素设置为始终从左起三分之一

Question

我在另一个 div 元素中有一个 div 元素，如下所示:

<div id="container">
  <div id="inner" style="width:50%;"> 
    some text
  </div>
</div>

内部 div 现在覆盖了容器宽度的一半。我想定位我的内部 div，以便它是左边空白空间的 1/3 和右边空白空间的 2/3。换句话说，容器宽度的 1/6 从左边开始，从右边开始是 2/6。即使您调整容器大小，我也希望内部 div 始终如此。我该怎么做？

Answer 1

在我的首选方法中，使用相对值(百分比)限制左右边距，以便尊重任何视口(viewport)更改 - 而不是仅定义左边距或使用填充并影响内部内容。

#container {
  border: 1px solid red
}

#inner {
  height: 100px;
  border: 1px solid blue;
  margin: 20px 60% 20px 30%;
}

Example via JSFiddle