html - divs-2 の反対側のエッジを揃える

Question

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

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

                         |Red Box|
               |Green Box|

score 1 · Accepted Answer

緑の箱を赤の箱の中に入れます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;
}

1 に答える 1