html - 表示: 最初の div が float:left でない限り、インライン ブロックが機能しない

Question

私はCSSの世界では比較的初心者なので、無知を許してください! 次の CSS を使用して、2 つの div を水平方向に配置しようとしています。

.portrait {
    position: relative;
    display:inline-block;
    width: 150px;
    height: 200px;
    padding: 20px 5px 20px 5px;
 }

.portraitDetails {
    position: relative;
    display:inline-block;
    width: 830px;
    height: 200px;
    padding: 20px 5px 20px 5px;
 }

残念ながら、クラスdisplay: inline-blockからを削除してdiv ブロック.portraitに置き換えない限り、最初の div ブロックの下に表示されます。一体何が起こっているのですか？float:left.portraitDetails