我有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%;
}
最佳答案
这里的问题是相对定位。这将导致元素相对于父容器#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/