Question

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

在我的代码中，UserName可以是动态长度，与CompanyName相同。我想根据UserName的名称设置div的宽度公司名称。

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

Answer 1

CSS：

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

Answer 2

＆＃13;

#divUserName,
#divCompanyName {
    left: 0px;
    right: 0px;
}

#divUserName {
    background-color: #f00;
}

#divCompanyName {
    background-color: #0f0;

＆＃13;

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

＆＃13;

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>

如何设置div的动态宽度？

3 个答案: