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

目前，我在父分区中有3个分区。其中1个分区包含用户名，需要根据名称的长度扩展其宽度。目前，每当我编辑我的父换行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中删除宽度声明

现在的问题是，由于username元素和logout元素都是浮动的，因此如果父元素的宽度不受约束，它们将被放置在彼此相邻的位置。解决方案是从它们中删除float声明，并将它们都放入一个新的float父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;
}

欢迎克里斯托弗
注销？
#用户信息{
浮动：左；
}

---

演示：

您是否尝试过计算名称的长度，然后计算其是否超过某个随宽度变化的阈值？您所说的“每当我编辑我的父换行div时就会崩溃”是什么意思？请在www.jsfiddle.net中举一个打破该名称的示例，以了解问题。

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

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

#user_info {
    float:left;
}