html - 制作只占用内容空间：禁用拉伸

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，因此您需要在您支持的浏览器中进行检查。

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