Относительное положение при изменении размера браузера

Question

У меня 3 блока div, и я хотел бы разместить их, как на картинке. Он работает со следующим CSS-кодом, но когда я изменяю размер моего браузера, блоки не находятся точно в одном месте (вы можете увидеть его на 2 снимках с комментариями).

У вас есть идея? Может быть, другая позиция (абсолютная или другая?).

PS: Я использую относительное положение, потому что я использую JqueryUI (draggable, resizable) для создания блоков и их размещения.

Спасибо.

Вот код 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 каким-либо другим способом, это не будет вести себя так, как вы описываете, что хотите.

Вот jsfiddle, что перебирает лучший способ сделать то, что вы ищете с помощью CSS, используя встроенный блок дисплея и вертикального выравнивания: 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; 
}