0

これは可能ですか: 現在の DIV の周りに DIV を作成するには?

たとえば、図のように、いくつかの DIV が中心 (大きな円) にあり、他の DIV がその周り (星) にあります。CSS はそのようなタスクを達成できますか?

ポジション例

4

3 に答える 3

3

はい、もちろんこのリンクを通過してください.. link1とlink2。

そして、ポジショニングdivを与えて を設定します:)歓声。

更新：（クロムベンダープレフィックスのみを追加）

HTML:

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

CSS:

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

働くフィドル

于 2012-09-27T16:01:36.257 に答える
2

このようなレイアウトを実現するには、絶対測位を使用できます

于 2012-09-27T15:55:00.753 に答える
1

連中はもう絶対位置で正解を言った。しかし、ここに私が提案するヒントがあります：

    <div class="bigDiv">
         <div class="smallDive">

         </div>
          <div class="smallDive">

         </div>
         <div class="smallDive">

         </div>
         //...
    </div>

    .bigDive{
       position:relative;
       //...
     }
     .smallDiv{
       position:absolute;
       //...
     }

その場合、内側の smallDive の位置は、ディスプレイのコーナーではなく、大きなダイブの位置に基づいて計算されます。

于 2012-09-27T16:28:24.810 に答える