如何根据用户名的长度使我的用户名div扩展其宽度？

Question

目前我在父div中有3个div.其中1个div包含用户名,需要根据名称的长度扩展其宽度.目前,每当我编辑父换行div时,我的div似乎都崩溃了.有谁知道如何解决这个问题？

这就是我试图解释的内容

我的HTML

<div id="user_wrap">

<div id="user_welcome">
Welcome <b>Christopher</b>
</div>

<div id="user_logout">
Logout?
</div>

<div id="user_pic">
<img src="images/user_pic.png" width="38" height="37" />
</div>

</div>

我的CSS

#user_wrap{
float: right;
height: 40px;
margin-right: 10px;
margin-top: 5px;
position: relative;
width: 190px;
}


#user_welcome{
float: left;
position: relative;
text-align: right;
width: 130px;
font-size: 11.8px;
font-family: "Helvetica Neue", Helvetica, Arial;
color: #e3e3e3;
margin-bottom: 3px;
padding-top: 3px;
}

#user_logout{
float: left;
position: relative;
text-align: right;
width: 130px;
font-size: 11.8px;
font-weight: 200;
font-family: "Helvetica Neue", Helvetica, Arial;
color: #939393;

}

#user_pic{
border-radius: 5px;
float: left;
height: 37px;
margin-top: -18px;
margin-left: 10px;
width: 38px;

-moz-box-shadow: 0 1px 4px #000000;
-webkit-box-shadow: 0 1px 4px #000000;
box-shadow: 0 1px 4px #000000;
}

Answer 1

如果您没有声明浮动元素的宽度,它将自动缩放其宽度以匹配内容,因此首先要做的是从CSS中删除宽度声明.

现在的问题是,由于username元素和logout元素都是浮动的,如果父元素的宽度不受约束,它们将彼此相邻放置.解决方案是从它们中删除浮动声明并将它们放入一个新的浮动父div中:

<div id="user_info">
    <div id="user_welcome">
    Welcome <b>Christopher</b>
    </div>

    <div id="user_logout">
    Logout?
    </div>
</div>

#user_info {
    float:left;
}

演示:http://jsfiddle.net/bpeZp/