4

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

我所拥有的是一个父 div，它border-radius使 div 成为圆形。嵌套在那个 div 中，我有几个我想要的子 div：

  • 直接定位在可见的圆形边界上（与围绕 div 的不可见方形“边界”相反——希望这个 jsFiddle能澄清我在这里想说的）。
  • 此外，我希望能够沿此边界的不同点精确定位子 div（因此，类似于“将 childDiv1 定位在圆形的 90 度位置 [或 ​​105 度位置、120 度、135 度等] parent div”，而不必使用top和left/或分配绝对像素值或其他东西）。

仍然是一个试图弄清楚 CSS 定位的业余爱好者，所以我什至不确定这是否可能，哈哈。期待你们能提供的任何意见！

4

3 回答 3

3

您可以使用 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/

于 2012-08-16T04:01:34.507 回答
1

http://jsfiddle.net/zSdsg/15/ （更新显示top:0不突出圆圈。）

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

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

于 2012-08-16T03:09:46.003 回答
0

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

​</p> 

<div id="parent">
<div id="child"></div>
<div id="child2"></div>
</div>​
于 2012-08-16T03:13:39.787 回答