我有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%;
}


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

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

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

最佳答案

这里的问题是相对定位。这将导致元素相对于父容器#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;
}

关于css - 调整浏览器大小时的相对位置,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34887701/

10-12 12:47
查看更多