如何设置div的动态宽度？

Question

<div style="width:100px"> 
    <div id="divUserName"> 
    UserName 
    </div> 
    <div id="divCompanyName"> 
    CompanyName 
    </div> 
</div> 

在我的代码中，用户名可以是动态长度，并且与公司名称相同。 我想为 公司名称设置用户名称的div的宽度。

限制是我只能使用style或css。没有jquery。

Answer 1

#divUserName, 
 
#divCompanyName { 
 
    left: 0px; 
 
    right: 0px; 
 
} 
 

 
#divUserName { 
 
    background-color: #f00; 
 
} 
 

 
#divCompanyName { 
 
    background-color: #0f0;

<div style="display: inline-block"> 
 
    <div id="divUserName" > 
 
    UserName 
 
    </div> 
 
    <div id="divCompanyName"> 
 
    CompanyName 
 
    </div> 
 
</div>

Answer 2

CSS：

#theparent, #divUserName, #divCompanyName { 
    display: inline-block; 
    width: auto/*not neccessary*/ 
} 

Answer 3

可以使用float属性做到这一点。当你使用float时，宽度将根据当前数据自动设置。

所以

#divUserName{ 
 
    background:green; 
 
    border:1px solid blue; 
 
    float:left; 
 
    margin:5px; 
 
} 
 
#divCompanyName{ 
 
    background:yellow; 
 
    border:1px solid blue; 
 
    margin:5px; 
 
    float:left; 
 
}

<div style="width:auto;"> 
 
    <div id="divUserName"> 
 
    UserName 
 
    </div> 
 
    <div id="divCompanyName"> 
 
    CompanyName 
 
    </div> 
 
    <div style="clear:both;"></div> 
 
    
 
</div>