動態尺寸塊後的絕對位置如何？

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，請告訴我。