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

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

#container {
  border: 1px solid red
}

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

Example via JSFiddle

Answer 2

#inner {
    margin-left: 16%;
}

Answer 3

margin-left:16%应该有效

<div id="container" style="width:500px;height:200px;background-color:#CCC">
  <div id="inner" style="width:50%;background-color:#555;margin-left:16%"> 
    some text
  </div>
</div>

此处示例：http://jsbin.com/somapagujawi/1/edit?html,output

Answer 4

或者你可以试试css padding，就像那样：

#container {  
    border : 1px solid red;  
    padding : 10px 30% 10px 10%;  
}  
#inner {  
    border : 1px solid green;
}

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

4 个答案: