html - div の反対側の端を揃える

Question

ユーザーがWebページをズームインおよびズームアウトしても、緑色のボックスが常に赤いヘッダーのすぐ下にあるようにします。

デモ: http://jsfiddle.net/BvQcx/

ここで、緑色のボックスにいくつかの margin-left プロパティを指定します。または、赤いボックスが常に中央にあること。誰かが私にjsfiddleソリューションを提供できますか? ソリューションは、div ベースのレイアウトである必要があります。

類似の質問: div の反対側の端を揃える

                         |Red Box|
               |Green Box|

Answer 1

そのためにも設定Float:leftしheaderます。これで問題が解決することを願っています。

フィドル

ヘッダーの相対位置を設定します（左プロパティをサポートするため。注：これは左と上をサポートする位置だけではありません）。そして、その左を 20% に設定します。

フィドル

Answer 2

このような？

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

ヘッダーに余白が必要です。ヘッダーに残された余白は、緑色のボックスの幅と等しくなければなりません

margin-left: 20%

Answer 3

これを試して

<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/