html - 对齐 divs-2 的对边

Question

我希望绿色框始终位于红色标题的左下角，即使用户放大和缩小网页。

演示：http: //jsfiddle.net/BvQcx/

现在，我希望将一些 margin-left 属性赋予绿色框。或者红色框总是在中心。有人可以为我提供一个 jsfiddle 解决方案吗？解决方案必须是基于 div 的布局。

类似问题：对齐 div 的相对边缘

                         |Red Box|
               |Green Box|

Answer 1

把绿色盒子放在红色盒子里面div，但要做好position: absolute。然后将其向左移动绿色框的宽度：

HTML：

<div class="header">This is the header.
    <div class="leftSection">This is the left section</div>
</div>

CSS：

.header {
    margin:0px auto;
    width:100px;
}
.leftSection {
    position: absolute;
    width: 100px;
    left: -100px;
}

小提琴：http: //jsfiddle.net/BvQcx/1/