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、サポートしているブラウザで確認する必要があります。

これらのスタイルは、純粋にインラインではなく、ある時点でスタイルシートに組み込まれると思います。