0

.cのように、右と上にそれぞれ.wp_listステーを入れる方法はright:0 top: 0？
私は位置を絶対に設定しましたが、そのようtop: 0に立つ.wpと.wp_list
http://jsfiddle.net/8dMrx/

.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>
4

2 に答える 2

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/

于 2013-05-29T22:37:11.023 に答える
1

これでうまくいくはずです：-

.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*/
}

フィドル

于 2013-05-29T22:38:08.937 に答える