html - DIV float: left と別の div with display: inline-block ラップ

Question

次のコードがあります。

<div id="first" style="float: left">
</div>
<div id="second">
    <div id="1" style="display: inline-block;">
    </div>

    <div id="2" style="display: inline-block;">
    </div>
    ......
    <div  id= "n" style="display: inline-block;">
    </div>
</div>

問題は、 のコンテンツが#secondのコンテンツよりも高い場合#first、子divのイン#secondが下に新しい行を開始すること#firstです。

2番目のdivのみの下に来るようにします。

Answer 1

最初の div の最大幅/幅を認識している場合は、その幅の値をmargin-left2 番目の div に適用します。

働くフィドル

更新：（幅がわからない場合）

#second{
    display: table-cell;
}

フィドル