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

その場合は、他の 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;
}

2 つの円の高さ幅を指定しない場合は、これを試すことができます。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 に答える