使 <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 Demo

一些旧版浏览器不支持inline-block，因此您需要在您支持的浏览器中检查它。

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