三个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{
	border: 0.5em solid black;
	width: calc(47% - 1em);
}
#one{
	height: 200vh;
	margin: 2% 1% 2% 2%;
	float:left;
}
#right_column{
	position:fixed;
	left: 50%;
	width: 100%;
	margin: 2% 0 0 0;
}
#two, #three{
	height: 40vh;
}
#two{
	margin: 0 2% 1% 1%;
}
#three{
	margin: 1% 2% 2% 1%;
}

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