如何根据用户名的长度使我的用户名div扩展其宽度？(How can I make my username div expand its width depending on the length of

如何根据用户名的长度使我的用户名div扩展其宽度？(How can I make my username div expand its width depending on the length of the username?)

目前我在父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; }

At the moment I have 3 divs inside a parent div. 1 of those divs contains the username which needs to expand its width depending on the length of the name. At the moment my divs just seem to all fall apart whenever I edit my parent wrap div. Anyone know how I can fix this?

this is what im trying to explain

My 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>

My 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; }

最满意答案

如果您没有声明浮动元素的宽度，它将自动缩放其宽度以匹配内容，因此首先要做的是从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/

If you don't declare a floating element's width, it will automatically scale its width to match the contents, so the first thing to do is to remove the width declarations from the CSS.

Now the problem is that since the username element and the logout element are both floating, they're placed next to each other if the parent element's width isn't constrained. The solution is to remove the float declaration from them and put them both into a new floating parent 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; }

Demo: http://jsfiddle.net/bpeZp/