html - 将嵌套的 div 放在屏幕的左侧

Question

假设我有 2 个 div：

<div id="divOuter">
    <div id="divInner"></div>
</div>

假设外部 div 位于页面下方约 3/4 处，位于屏幕中心（水平方向），宽度为 200px。显然，内部 div 最初会位于此位置。如何将内部 div 保持在相同的垂直位置（目前是），但将其一直移动到屏幕的左侧？

Answer 1

绝对定位divInner并将 left 属性设置为零：

position:absolute;
left:0px;

jsFiddle 示例

Answer 2

这个HTML怎么样...

<div id="divOuterWrapper">
    <div id="divOuter">
        <div id="divInner"></div>
    </div>
</div>

...这个CSS？

#divOuterWrapper {
    position:relative;
    background-color:#dddddd;
}

#divOuter {
    width:200px;
    margin:0 auto;
    margin-top:300px;
    background-color:#00ff00;
    min-height:50px;
}

#divInner {
    position:absolute;
    background-color:#0000ff;
    min-height:30px;
    width:200px;
    margin-left:50%;
    left:-50%;
}

这是一个JSFiddle：

http://jsfiddle.net/5Qfq3/1/

Answer 3

你可以添加一些 CSS 到它。但是，我知道的唯一方法是使用固定位置，例如：

    .position{
     position: relative; left: -20px;
      }

然后在你的 div

<div id="divInner" Class="position"></div>

将在左侧 20 像素处

Answer 4

您可以提供#divInner绝对左侧位置，但将其顶部位置保留为自动；

#divInner {
    position: absolute;
    left: 0;
}

这假设它#divOuter本身不是绝对定位的。