我正在使用一个内部有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"> <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
答案 0 :(得分:7)
如果为position: relative
指定#right
,然后为两个内部元素指定position: absolute
,则应该能够使用top / left / bottom / right属性来实现效果想。
答案 1 :(得分:0)
制作#right {position:relative}
制作#right .top {position:absolute, top:0}
制作#right .bottom {position:absolute, bottom:0}
答案 2 :(得分:0)
试试这个。
#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的顶部和底部。