0

分割を使って円を作りたいのですが、円ごとにマージンが異なります。問題は、div小さなmargin-top影響で最大の影響をmargin top別のに与えることdivです。

HTMLは次のとおりです。

<div class="circle size2 marginTop2"></div>
<div class="circle size1 marginTop1" ></div>

そしてこれがCSSです：

div.circle{

display: inline-block;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-o-border-radius: 100px;
-ms-border-radius: 100px;
border-radius: 100px;
background: pink;
opacity: 0.3;
margin-top: 0px;

}

div.size1{
   width:120px;
   height:120px;
}

div.size2{
   width:130px;
   height:130px;
}

div.marginTop1{
    margin-top: 20px;
    margin-right:-10px;
}
div.marginTop2{
 margin-top: 140px
 }

コードは次のとおりです。

http://jsfiddle.net/L6gPd/

div小さなmargin-top影響で大きなマージントップで。

説明をお願いします。

4

2 に答える 2

0

あなたの質問からは完全には明らかではありませんが、それらを垂直方向に異なる高さにしようとしていますか? もしそうなら、追加してみてください

vertical-align:top;marginTop1 および marginTop2 クラスに追加して、margin-top 値が目に見える効果を持つようにします。

于 2012-01-03T00:44:13.063 に答える
0

並べて配置する場合は、 に追加float:left;しdiv.circleます。

Firebug または Chrome 開発者ツールを使用して要素を調べると、2 番目の円がmargin-topわずかにあることがわかりますが20px、それはページの上部からではなく、1 番目の円の位置に相対的です。

于 2012-01-03T01:53:00.093 に答える