2

こちらのガイドに従って、CSS を使用して円を生成することに取り組んできました。基本は完了しましたが、CSS で生成された 1 つの円を別の円の上に重ねるのに苦労しています。私のフィドルはここにあります。

そうしたいです：

  1. テキストを含む内側の円の位置を調整します - 外側の円に正しく並べることができません。各円は外側の円と内側の円で構成され、それぞれの内側の円には適切なテキストが含まれるという考え方です。
  2. 内側の円の垂直方向および水平方向の中央にテキストが正しく配置されるようにする
  3. 同じ水平線上にある 3 つの円すべてを取得します。

以下に貼り付けたのは、円を表示したい方法の画像です。

誰でも助けてもらえますか？

3 円

HTML:

<div id="law-outer-circle" class="circle"><div id="law-inner-circle" class="circle">Law firms</div></div>   
<div id="industry-outer-circle" class="circle"><div id="industry-inner-circle" class="circle">Industry</div></div>
<div id="in-house-outer-circle" class="circle"><div id="in-house-inner-circle" class="circle">In-house counsel</div></div>

CSS:

.circle {
border-radius: 50%;
display: inline-block;
margin-right: 20px;

/* text styling */
font-size: 45px;
color: #FFF;
line-height: 75px;
text-align: center;
font-family: Arial;
}

#industry-inner-circle {
width: 250px;
height: 250px;
background: #DD4814;
position: absolute;
top: 24%; 
left : 24%;
display: block;
border: 2px solid #fff;
}

#industry-outer-circle {
background: #DD4814;
width: 270px;
height: 270px;
position:relative;
}

#in-house-inner-circle {
width: 250px;
height: 250px;
background: #AEA79F;
position: absolute;
top: 24%; 
left : 24%;
display: block;
border: 2px solid #fff;
}

#in-house-outer-circle {
background: #AEA79F;
width: 270px;
height: 270px;
position:relative;
}

#law-inner-circle {
width: 250px;
height: 250px;
background: #5E2750;
position: absolute;
top: 24%; 
left : 24%;
display: block;
border: 2px solid #fff;
}

#law-outer-circle {
background: #5E2750;
width: 270px;
height: 270px;
position:relative;
}
4

2 に答える 2

2

box-shadowcssプロパティを使用して、この方法でそれを行うことができます。

HTML

<div class="circle color-1 color1-box-shadow">
    industry
</div>
<div class="circle text color-2 color2-box-shadow">
    In-house legal counsel
</div>
<div class="circle color-3 color3-box-shadow">
    Law Firms
</div>

CSS

.circle {
    border-radius: 50%;
    float: left;
    display: inline-block;
    margin-right: 20px;
    /* text styling */
    font-size: 45px;
    width: 250px;
    height: 250px;
    color: #FFF;  border: 2px solid #fff;
    line-height: 250px;
    text-align: center;
    font-family: Arial;
}
.color-1 { background: #DD4814;}
.color-2 { background: #AEA79F; }
.color-3 { background: #5E2750; }
.color1-box-shadow { box-shadow: 0px 0px 1px 1px #DD4814 }
.color2-box-shadow { box-shadow: 0px 0px 1px 1px #AEA79F }
.color3-box-shadow { box-shadow: 0px 0px 1px 1px #5E2750 }
.text { line-height: 45px; padding-top: 50px; height: 200px }

例

于 2013-03-21T14:56:11.910 に答える
1

.circle { line-height: 250px; }(内側の円の高さと同じ) を指定し、内側の円topと値を8px left(outerCircleHeight - innerCircleHeight - bothSidesBorder / 2 = 8) に変更します。

#industry-inner-circle {
    top: 8px;
    left : 8px;
}

jsfiddle の例

于 2013-03-21T14:58:53.973 に答える