开发者

Position absolute or something else?

开发者 https://www.devze.com 2023-04-09 15:14 出处:网络
Hi I want t开发者_运维问答o achieve the following: The following code works but I\'m not sure if position: absolute for left upper \"Name\" is the wise way to do it or should I use float ?

Hi I want t开发者_运维问答o achieve the following:

The following code works but I'm not sure if position: absolute for left upper "Name" is the wise way to do it or should I use float ?

Position absolute or something else?

Here is the html

    <div class="bodyframe">
        <div class="upperbodyframe">   
            <div id="leftupperbodyframe">Name</div>
            <div id="rightupperbodyframe">Name 2 Name 3</div>

        </div>

And the css

![.bodyframe {

}
.upperbodyframe{


}

#leftupperbodyframe{

   text-align:left;
   border: 1px solid ;
    position: absolute;
}
#rightupperbodyframe{
    text-align: right;

    }]


i would use floats here. there's really no reason for the position:absolute here as well.

.upperbodyframe {overflow:hidden} /* or div will collapse with only floated elements inside */
#leftupperbodyframe {float:left; border: 1px solid ;}
#rightupperbodyframe {float:right;}


You can do this with two method.

First Method

.upperbodyframe{
    width:100%;
    position:absolute;
}
#leftupperbodyframe{
    position: absolute;
    left:0px;
}
#rightupperbodyframe{
    position: absolute;
    right:0px;
}
.clear{
    clear:both;
}
 <div class="upperbodyframe">   
            <div id="leftupperbodyframe">Name</div>
            <div id="rightupperbodyframe">Name 2 Name 3</div>
        </div>

Second Method

.upperbodyframe{
    width:100%;
}
#leftupperbodyframe{
    float:left;
}
#rightupperbodyframe{
    float:right;
}
.clear{
    clear:both;
}
 <div class="upperbodyframe">   
            <div id="leftupperbodyframe">Name</div>
            <div id="rightupperbodyframe">Name 2 Name 3</div>
        </div>

Thanks,Arun Krishnan

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号