动态尺寸块后的绝对位置如何？

Question

我有这样的块，设在顺序A，B，C：

块 “A” 和 “C” position: absolute。我需要在块“A”之后显示块“C”，但块“A”的高度可能很高，我不能使用属性top。下面是代码的示例：

.wrapper { 
    position: relative; 
    width: 100%; 
    height: 1000px; 
} 

.block-1 { 
    position: absolute; 
    left: 50%; 
    width: 300px; 
    height: 200px; 
    background: red; 
} 

.block-2 { 
    width: 300px; 
    height: 400px; 
    background: yellow; 
} 

.block-3 { 
    position: absolute; 
    left: 50%; 
    width: 300px; 
    height: 400px;  
    background: green; 
} 

https://jsfiddle.net/skriming/xn47v51k/

Answer 1

只是代替你的CSS以下之一：

.wrapper { 
    position: relative; 
    width: 100%; 
    height: 1000px; 
} 

.block-1 { 
    position: relative; 
    left: 50%; 
    width: 300px; 
    height: 200px; 
    background: red; 
} 

.block-2 { 
    float:left; 
    position:absolute; 
    top:0; 
    width: 300px; 
    height: 400px; 
    background: yellow; 
} 

.block-3 { 
    position: relative; 
    left: 50%; 
    width: 300px; 
    height: 400px; 
    background: green; 
} 

Answer 2

这里是解决方案，但它结合的CSS + jquery的

我加入浮留给B嵌段

.block-2{float: left} 

和顶使用jQuery定位到C块

var aHeight = $(".block-1").height(); 
$(".block-3").css("top",aHeight); 

如果因为某种原因无法使用jquery，请告诉我。