CSS div里面的定位

Question

我使用了一个内部有2个元素的div，我想将我的第一个元素放置在垂直对齐顶部和第二个元素的div底部。该div是我的页面的正确部分，并等于我的主要内容的高度。

#right { 
    float:right; 
    width: 19%; 
    background:#FF3300; 
    margin-left:2px; 
    padding-bottom: 100%; 
    margin-bottom: -100%; 
} 
#right .top { 
    display:block; 
    background-color:#CCCCCC; 
} 
#right .bottom {  
    bottom:0px; 
    display:block; 
    background-color:#FFCCFF; 
    height:60px; 
} 

HTML：

<div id="right"> 
    <span class="top">Top element</span> 
    <span class="bottom"><img src="images/logo_footer1.gif" width="57" height="57" align="left" class="img">&nbsp;<img src="images/logo_footer2.gif" width="57" height="57" align="right" class="img"></span> 
</div> 

我想正确的股利是这样的： alt text http://christianruado.comuf.com/element.png

Answer 1

让#right {position:relative}

让#right .top {position:absolute, top:0}

让#right .bottom {position:absolute, bottom:0}

Answer 2

如果您为#right指定position: relative，然后为两个内部元素指定position: absolute，则应该可以使用top/left/bottom/right属性来实现所需的效果。

Answer 3

试试这个。

#right { 
     position:relative; <-- add this 
     float:right; 
     width: 19%; 
     background:#FF3300; 
     margin-left:2px; 
     padding-bottom: 100%; 
     margin-bottom: -100%; 

    } 

} 
#right .top { 
    position:absolute; <-- add this 
    top: 0px; <-- and this 
    display:block; 
    background-color:#CCCCCC; 
} 

    #right .bottom { 
      position:absolute: <-- add this. 
     bottom:0px; 
     display:block; 
     background-color:#FFCCFF; 
     height:60px; 

    } 

添加position:relative;父和position:absolute;与top和bottom会告诉你的跨度，他们注定要被你的父母之内绝对定位，并强迫他们坚持你的div的顶部和底部。