調整瀏覽器大小時的相對位置

Question

我有3個div區塊，我想將它們放在圖片中。 它與以下CSS代碼一起使用，但是當我調整瀏覽器大小時，塊不完全在同一位置（您可以在2張帶有註釋的圖片中看到它）。

你有什麼想法嗎？也許另一個位置（絕對或其他？）。 PS：我使用相對位置，因爲我使用JqueryUI（可拖動，可調整大小）來創建塊並定位它們。

謝謝。

這裏是CSS代碼：

#corps { 
    background: black; 
} 

#bloc { 
    width: 40%; 
    background: blue; 
    position: relative; 
    top: 50px; 
} 

#bloc2 { 
    width: 40%; 
    background: lime; 
    position: relative; 
    top: 100px; 
    left: 2%; 
} 

#bloc3 { 
    width: 45%; 
    background: purple; 
    position: relative; 
    top: -300px; 
    left: 50%; 
} 

Answer 1

這裏的問題是相對定位。這將導致元素相對於父容器#corps定位。如果您不打算以任何其他方式使用jQuery進行編輯，則不會像您所描述的那樣行事。

這裏是一個迭代的最佳方式來完成你要尋找的使用inline-block的顯示和垂直對齊的CSS的jsfiddle：https://jsfiddle.net/4gw22vrh/

#corps { 
    background: black; 
} 

#bloc { 
    width: 40%; 
    background: blue; 
    display:inline-block; 
} 

#bloc2 { 
    width: 40%; 
    background: lime; 

} 

#bloc3 { 
    width: 45%; 
    background: purple; 
    display:inline-block; 
    vertical-align:top; 
}