三個div的位置

Question

如何對齊三個div如下？

多，我想DIV2，當我滾動DIV3加以固定。我嘗試了position: fixed，但我需要硬編碼左邊和頂部需要多少像素到div2/div3，這並不好，因爲當我更改屏幕分辨率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>