CSS定位在div内 [英] CSS positioning inside div

查看:156
本文介绍了CSS定位在div内的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用一个div与2个元素在里面,我想要定位我的第一个元素垂直对齐顶部和第二个元素到div的底部。 div是我的页面的正确部分,等于我的主要内容的高度。

I am using a div with 2 elements inside and I want to position my 1st element to be vertically aligned top and 2nd element to the bottom of the div. The div is the right portion of my page and equal to the height of my main content.

#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像这样:

I want the right div to be like this:

推荐答案

如果指定 position:relative for #right ,然后 position:absolute 两个内部元素,你应该能够使用top / left / bottom / right属性来实现你想要的效果。

If you specify position: relative for #right, and then position: absolute for the two internal elements, you should be able to use top/left/bottom/right attributes to achieve the effect you want.

这篇关于CSS定位在div内的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆