Question

奇怪的是，我无法找到关于这个主题的任何内容;我认为这是一个非常普遍的问题！

我得到的是一个带有border-radius的父div来使div循环。嵌套在那个div中，我有几个我想要的子div：

直接放置在可见的圆形边框上（而不是围绕div的隐形方形“边框” - this jsFiddle希望澄清我在这里想说的内容。）
此外，我希望能够沿着这个边界的不同点精确定位子div（例如，“将childDiv1置于90deg位置[或105deg位置，120deg，135deg等]循环父div“而不是必须使用top和left或指定绝对像素值或其他东西。）

还是一个业余爱好者试图找出CSS定位，所以我甚至不确定这是否有可能，哈哈。期待您们提供的任何意见！

Answer 1

您可以使用css3 transform和transform-origin来实现此目标

<div id="parent">
    <div class="child" id="child1"></div>
    <div class="child" id="child2"></div>
    <div class="child" id="child3"></div>
    <div class="child" id="child4"></div>
</div>

#parent {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px dotted #000;
    border-radius: 150px;
}

.child {
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: #666;
    left: 135px;
}
#child1{
    transform: rotate(90deg);
    transform-origin:50% 150px;
}
#child2{
    transform: rotate(105deg);
    transform-origin:50% 150px;
}
#child3{
    transform: rotate(120deg);
    transform-origin:50% 150px;
}
#child4{
    transform: rotate(135deg);
    transform-origin:50% 150px;
}

http://jsfiddle.net/zSdsg/20/

Answer 2

http://jsfiddle.net/zSdsg/15/ （已更新以显示top:0未突出显示该圈。）

或http://jsfiddle.net/zSdsg/17/，看起来更酷：}

编辑：我想我误解了你的问题。我将根据......答案更新或删除我的答案。

Answer 3

http://jsfiddle.net/zSdsg/14/

这样的东西会是你想要的吗？

#parent {
position: relative;
width: 300px;
height: 300px;
border: 1px dotted #000;
border-radius: 150px;
}

#child {
position: absolute;
width: 30px;
height: 30px;
background-color: #666;
}
#child2 {
position: absolute;
top:35px;
left:40px;
width: 30px;
height: 30px;
background-color: red;
    border-radius: 150px;
}

<div id="parent">
<div id="child"></div>
<div id="child2"></div>
</div>

沿父div的可见边界定位元素

3 个答案: