如何在绝对定位块内部移除额外的填充或边距？

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。

- klefevre

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。我认为它需要像设置高度和宽度一样多的“看护”。

- Jon Harding

---

它的工作就像魔法一样，但是我不喜欢手动设置.circles（红色）div的大小。这就是为什么我想要一个相对位置。 - klefevre

如果不设置高度和宽度，问题就在于随着内容的增长，圆形效果会丧失。 - Jon Harding

我在我的答案中添加了另一个选项。 - Jon Harding

哦，不好意思，你误解了我的意思。我是在谈论红色的 div（.circles），我不想在它上面设置宽度/高度。我希望它能够适应其子元素（就像 span 一样）。 - klefevre

是的，这会很困难，因为当你将其向右浮动或绝对定位时，它不是块级元素。 - Jon Harding

请查看我的下面的新JSFiddle。如果您在标题圆中添加margin-right，那么红色div上就不需要设置宽度或高度。 - Tricky12

Answer 2

你需要给你的

标签添加一个类，并将它们的margin和padding设置为0。

<p class="p">TITLE</p>
<p class="p">65 reads</p>

CSS

.p {
    margin: 0;
    padding: 0;
}

您可能还想在下层的div中添加float: right;。

.circle-reads {
    float: right;
}

JSFiddle

（链接1：JSFiddle）

编辑：我进行了更多的尝试，使它看起来几乎完全符合您的要求。

新的Fiddle

（链接2：新的Fiddle）

我没有特定的链接，这只是我在使用HTML/CSS时随着时间和大量谷歌搜索学到的东西。

- Tricky12

---

谢谢你的提示，我不知道<p> "auto margin/padding"，你有相关提示的链接可以分享吗？ - klefevre