css - 如何使每个包裹中的 1 个 div 保持在右侧和顶部

Question

如何.c在每个.wp_list停留在右边和顶部，比如right:0 top: 0？
我设置了绝对位置，但如果那样的话就不是top: 0http://jsfiddle.net/8dMrx/.wp.wp_list

.wp{
    background-color: blue;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    width: 450px;
}
.wp_list{
    background-color: red;
    margin: 10px;
    height: 130px;
}
.a, .b, .c{
    background-color: gray;
}
.a{
    width: 220px;
    height: 30px;
}
.b{
    width: 220px;
    height: 100px;
}
.c{
    width: 130px;
    height: 130px;
}

html

<div class="wp">
    <div class="wp_list">
        <div class="a">a</div>
        <div class="b">b</div>
        <div class="c">c</div>
    </div>
    <div class="wp_list">
        <div class="a">a</div>
        <div class="b">b</div>
        <div class="c">c</div>
    </div>
    // generate from php
</div>

Answer 1

您可以绝对定位.c元素：

.c{
    position:absolute;
    right:0px;
    top:0px;
    width: 130px;
    height: 130px;
}

您还需要相对定位容器，以便.c元素绝对定位在.wp_list元素内，而不是.wp：

.wp_list{
    position:relative;
    background-color: red;
    margin: 10px;
    height: 130px;
}

http://jsfiddle.net/8dMrx/1/

Answer 2

这应该可以解决问题：-

.wp_list{
    background-color: red;
    margin: 10px;
    height: 130px;
    position:relative; /*mark parent as relative*/
}

.c{
    width: 130px;
    height: 130px;
    top:0; /*set right and top of the relative parent*/
    right:0;
    position:absolute; /*mark child as absolute*/
}

小提琴