对齐div的相对边缘

Question

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

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

现在，我想要一些保留左边的属性给绿框。或者说红色框总是在中心。有人可以为我提供一个jsfiddle解决方案吗？解决方案必须是基于div的布局。

类似问题：Aligning opposite edges of divs

                         |Red Box|
               |Green Box|

Answer 1

我使用jQuery

解决了这个问题

http://jsfiddle.net/XX28t/

var sectionSize = $('.leftSection').width();
$('.header').css('marginLeft', sectionSize);

Answer 2

也为Float:left设置header。我希望这能解决你的问题。

Fiddle

设置标题的位置，如相对（支持Left属性。注意：这不仅是支持left和top的位置。）。然后将其左侧设为20％。

Fiddle

Answer 3

喜欢这个吗？

http://jsfiddle.net/XX28t/2/

标题上需要保留边距，标题左边的边距应该等于绿框的宽度

margin-left: 20%

Answer 4

试试这个

<table>
  <tr>
<td>&nbsp;</td>
<td><div style="border: 1px solid red">
    This is the header.
</div></td>
  </tr>
  <tr>
<td><div style="border: 1px solid green">
    This is the header.
</div></td>
<td>&nbsp;</td>
  </tr>
<table>

工作示例http://jsfiddle.net/mQBKx/