html - 如何删除绝对 block 内的额外填充或边距？

Question

我想重新创建类似这个插图的东西

而且我无法修复填充(或边距问题)。这是我尝试过的:http://jsfiddle.net/kl94/RZPRS/2/

.circles {
    background-color: red;

    position:absolute;
    right: 0;
    top: 0;

    margin: 0;
    padding: 0;
}

.circle-title {
    background-color: orange;

    position:relative;
    right: 0px;
    top: 0px;

    width: 80px;
    height: 80px;
/*     -webkit-border-radius: 40px;
    -khtml-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px; */

    margin:0;
    padding:0;
}
.circle-reads {
    background-color: #28dd21;

    position:relative;
    right: 0px;
    top: 0px;

    width: 60px;
    height: 60px;
/*     -webkit-border-radius: 30px;
    -khtml-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px; */

    margin:0;
    padding:0;
}

约束是红色的 div，它必须是绝对的才能约束到顶部/右侧的父 div。

Answer 1

在这种情况下，您不妨也将其他两个元素定位为 absolute。您需要为红色 div 指定固定的高度和宽度，因为它位于 absolute

查看此 jsfiddle .

.circles {
    background-color: red;
    position:absolute;
    height:100px;
    width:100px;
    right: 0;
    top: 0;
}

.circle-title {
    background-color: orange;
    position:absolute;
    left: 0px;
    top: 0px;
    width: 80px;
    height: 80px;
    -webkit-border-radius: 40px;
    -khtml-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px; 
}

.circle-reads {
    background-color: #28dd21;
    position:absolute;
    right: 0px;
    bottom: 0px;
    width: 60px;
    height: 60px;
    -webkit-border-radius: 30px;
    -khtml-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

如果你想让两个圆圈不指定高度宽度，你可以试试这个。参见 jsfiddle .我觉得它需要像设置高度和宽度一样多的“保姆”。