如何在<header> </header>中实现3个垂直div

时间:2012-06-04 02:27:39

标签: css html header

请帮忙!如何在标头标签内实现3个垂直div。 我将标题定义为相对,并将每个div内部定义为绝对。 对于内部div

  • div1:将偏移值设置为top:0和right:0
    div2:不确定要设置的偏移值。(请在这里帮忙!) div3:将偏移值设置为bottom:0和right:0

在这里输入代码

<!--html code -->
<header id="divhead">
        <div id="logo"></div>
        <div id="links"></div>
            <div id="social_links"></div>
        <div id="navigation"></div>
</header>

/* css */
#divhead{
    width:960px;
    height:96px;
    margin-bottom:1em;
    background:yellow;
    opacity:.5;
    margin:0 auto;
    position:relative;
}
#logo{
    width:240px;
    height:94px;
    background: url(images/ss_logo_transparent_text.png)no-repeat;/*image width:230.4px/image height:43.2*/
    border:1px solid #000;
    position:absolute;
    float:left;
}
#links{
    width:715px;
    height:22px;
    border:1px solid #000;
    position:absolute;
    top:0;
    right:0;
    background:green;
    opacity:.5;
}
#social_links{
    width:715px;
    height:20px;
    border:1px solid #000;
    position:absolute;
    right:0;
    background:blue;
    opacity:.5;

}
#navigation{
    width:715px;
    height:50px;
    border:1px solid #000;
    position:absolute;
    bottom:0;
    right:0;
    background:#888;
    opacity:.5;
}   

1 个答案:

答案 0 :(得分:1)

从评论中我了解到您可能正在寻找类似this

的内容