Как установить динамическую ширину div?

Question

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

В моем коде UserName может иметь динамическую длину и то же самое с CompanyName. Я хочу установить ширину div как имя UserName аналогично для CompanyName.

Ограничение в том, что я могу использовать только стиль или 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, ширина будет автоматически установлена ​​в соответствии с данными, присутствующими в этом.

так

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