调整浏览器大小时的相对位置

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; 
}