如何让每个.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>
答案 0 :(得分: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;
}
答案 1 :(得分: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*/
}