make <div>仅占用内容空间:禁用拉伸

Question

我有<div>一些嵌套的div.所有这些都有相同的高度.我需要父母<div>采取width其内容采取的(我想申请border-style财产).财产display:inline(父母)对我没有帮助.

这是标记:

   <div style="border-style:solid;height:60px;">
        <div  style="display:inline;float:left;background-color:Aqua;height:60px;width:30px;border-left-style:solid"></div>
        <div  style="display:inline;float:left;background-color:Black;height:60px;width:30px;border-left-style:solid"></div>
        ......       
   </div>

Answer 1

使用display: inline-block;似乎工作:

 <div style="display:inline-block;border-style:solid;height:60px;">
        <div  style="display:inline;float:left;background-color:Aqua;height:60px;width:30px;border-left-style:solid"></div>
        <div  style="display:inline;float:left;background-color:Black;height:60px;width:30px;border-left-style:solid"></div>
   </div>

jsFiddle演示

某些旧版浏览器不支持inline-block,因此您需要在支持的浏览器中进行检查.

我假设这些样式会在某些时候进入样式表,而不是纯粹的内联.