动态定位分区

Question

我正在一个网站上，我有两个固定的div在上面。第一个只是一个小标题栏。第二个保存被编码为响应的图像。

我需要添加第三个div，根据窗口大小动态地将自己置于第二个div下。我已经搜索了很多，最好的选择是添加填充像素或间距设置像素的高度。这对我来说不起作用，因为在移动设备上两个div之间的空间很大。

任何帮助表示赞赏。

.one { 
width: 100%; 
position: fixed; 
top: 0; 
left: 0; 
float: left; 
background-image:url(assets/img/bg/bg2.jpg); 
z-index: 3;} 

.two { 
width: 100%; 
position: fixed; 
top: 75px; 
left: 0; 
float: left; 
z-index: 0; } 

.three { 
width: 100%; 
height:200px; 
position: relative; 
float: left; 
z-index: 2;} 

<div class="one"> 
<img src="assets/img/logo.png"> 
</div> 
<div class="two"> 
<img src="assets/img/bg/intro.jpg" class="img-responsive"> 
</div> 
<div class="three">This div needs to always find the bottom of the responsive div two</div> 

Answer 1

调查media queries。您需要编写放置div的CSS规则，具体取决于视口的像素大小。您可以编写一个规则，如果视口小于某个像素阈值，则会更改div的放置规则。

Answer 2

我会把第二个和第三个div放在另一个div中并给它一个display：block; 我认为这就是你要找的。