4

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

而且我无法修复填充（或边距问题）。这是我尝试过的：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。

4

2 回答 2

2

在这种情况下，您不妨也定位其他两个元素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。我觉得它需要像设置高度和宽度一样多的“保姆”。

于 2013-09-06T13:17:55.947 回答
1

您需要为p标签添加一个类，并将它们的边距和填充设置为 0。

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

CSS

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

您可能还想添加float: right;到较低的 div。

.circle-reads {
    float: right;
}

JSFiddle

编辑：我做了更多的玩弄，让它看起来几乎和你想要的一样。

新小提琴

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

于 2013-09-06T13:17:10.143 回答