在div内部进行CSS定位

Question

我正在使用一个包含两个元素的 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>

我希望右侧div像这样： alt text http://christianruado.comuf.com/element.png

- christian

---

你可能也想尝试在http://doctype.com/上查看/发布这个。 - Zhaph - Ben Duguid

Answer 1

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

- Matt Sach

---

问题在于正确的容器位于包装器内部，并且溢出设置为隐藏。因此，当右侧容器溢出到包装器时，底部部分将被隐藏。 - christian

Answer 2

试试这个。

   #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属性告诉您的元素它们应该在父元素内绝对定位，并强制它们粘在

的顶部和底部。

- Kyle

---

问题在于正确的容器位于包装器内部，并且溢出设置为隐藏。因此，当右侧容器溢出到包装器时，底部部分将被隐藏。 - christian

啊，那肯定会引起一些问题。希望现在能够正常工作 :) - Kyle

Answer 3

使 #right {position:relative}

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

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

- Fermin