如何設置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>