这可能:在当前DIV周围创建DIV吗?
例如,有些DIV位于中心(大圆圈),其他DIV位于它周围(星星),就像在图片上一样。 CSS可以实现这样的任务吗?
答案 0 :(得分:3)
然后通过postioning :)欢呼来设置div
。
更新 :( 仅添加了Chrome供应商前缀)
<div class="parent">
<div class="star topMid"></div>
<div class="star top left"></div>
<div class="star top right"></div>
<div class="star midLeft"></div>
<div class="star midRight"></div>
<div class="star bottom left"></div>
<div class="star bottom right"></div>
<div class="star bottomMid"></div>
</div>
.parent {
border-radius: 50%;
width: 300px;
height: 300px;
position: relative;
}
.parent:after {
content:"";
border-radius: 50%;
top: 55px;
left: 55px;
right: 55px;
bottom: 55px;
position: absolute;
border: 1px solid red;
}
.star {
position: absolute;
width: 0px;
height: 0px;
border-width: 20px 20px 20px 20px;
border-color: transparent transparent green transparent;
border-style: solid;
}
.star:after {
content:"";
position: absolute;
width: 0px;
height: 0px;
border-width: 20px 20px 20px 20px;
border-color: transparent transparent green transparent;
border-style: solid;
-webkit-transform: rotate(180deg);
top: 7px;
left: -20px;
}
.top {
top: 12.5%;
}
.left {
left: 12.5%;
}
.bottom {
bottom: 20%;
}
.right {
right: 12.5%;
}
.topMid {
top:0px;
left:50%;
margin-left:-25px;
}
.bottomMid {
bottom: 25px;
left:50%;
margin-left:-25px;
}
.midLeft {
top:50%;
left:5px;
margin-top:-25px;
}
.midRight {
top:50%;
right:5px;
margin-top:-25px;
}
答案 1 :(得分:2)
要实现此类布局,您可以使用absolute positioning
答案 2 :(得分:1)
Guys已经用绝对定位说出了正确答案。但这是我建议的提示:
<div class="bigDiv">
<div class="smallDive">
</div>
<div class="smallDive">
</div>
<div class="smallDive">
</div>
//...
</div>
.bigDive{
position:relative;
//...
}
.smallDiv{
position:absolute;
//...
}
因此,在这种情况下,内部smallDive的位置将根据大潜水位置计算,而不是根据显示器的角落计算。