调整浏览器大小

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进行编辑，那么它的行为就不会像您描述的那样。

这是一个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;
}