Question

我想使用分区制作圆圈，每个圆圈都有不同的边距。问题是，div margin-top margin top会影响另一个div的最大<div class="circle size2 marginTop2"></div> <div class="circle size1 marginTop1" ></div>。

这是HTML：

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;

这是CSS：

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
 }

}

div

以下是代码：

http://jsfiddle.net/L6gPd/

小margin-top的{{1}}影响大边距。

请问有什么解释吗？

Answer 1

你的问题并不完全清楚，但是你是想让它们垂直地达到不同的高度吗？如果是这样，会尝试添加

vertical-align:top;到marginTop1和marginTop2类，因此margin-top值将产生明显效果。

Answer 2

如果您想将它们并排放置，请将float:left;添加到div.circle。

如果您使用Firebug或Chrome开发者工具检查元素，您会看到第二个圆圈的margin-top只有20px，但它相对于第一个圆圈的位置而不是来自页面顶部。

div的不同边缘不起作用

2 个答案: