3つのdivの位置

Question

どのように3つのdivを以下のように揃えることができますか？

そして、もっと私がスクロールしたときに、私はDIV2をしたいと思い、固定されるようにDIV3。私はposition: fixedを試しましたが、div2/div3の左端から上端までのピクセル数をハードコードする必要があります。これは画面の解像度を変更したときにページに表示されないためです。

Answer 1

<div class="one">One</div> 
<div class="fixed-wrapper"> 
    <div class="two">Two</div> 
    <div class="three">Three</div> 
</div> 

CSS

.one{ 
    width: 600px; 
    height: 600px; 
    background-color: red; 
} 

.fixed-wrapper{ 
    width: 200px; 
    position: fixed; 
    top: 0px; 
    right: 0px; 
} 
.two{ 
    width: 200px; 
    height: 200px; 
    background-color: yellow; 
} 
.three{ 
    width: 200px; 
    height: 200px; 
    background-color: green; 
} 

Answer 2

私はもっとこのような何かをしたいです。それは完全に敏感です。 vhは必要に応じてピクセルやパーセンテージに置き換えたり、コンテンツのサイズをコンテナにすることができます。

#one, #two, #three{ 
 
\t border: 0.5em solid black; 
 
\t width: calc(47% - 1em); 
 
} 
 
#one{ 
 
\t height: 200vh; 
 
\t margin: 2% 1% 2% 2%; 
 
\t float:left; 
 
} 
 
#right_column{ 
 
\t position:fixed; 
 
\t left: 50%; 
 
\t width: 100%; 
 
\t margin: 2% 0 0 0; 
 
} 
 
#two, #three{ 
 
\t height: 40vh; 
 
} 
 
#two{ 
 
\t margin: 0 2% 1% 1%; 
 
} 
 
#three{ 
 
\t margin: 1% 2% 2% 1%; 
 
}

<div id="one">&nbsp;</div> 
 
<div id="right_column"> 
 
\t <div id="two">&nbsp;</div> 
 
\t <div id="three">&nbsp;</div> 
 
</div>