divにインラインブロックを適用してもまだ変わっている

Question

インラインブロックテクニックを使用して2つのdivを互いに整列させようとしています。私のコードはかなりシンプルですが、なぜ機能していないのか分かりませんが、問題の原因はわかりません。

は、ここに私のコードです：

.content .sidebar, .content .section { 
 
    display: inline-block; 
 
    border: none; 
 
    min-height: 200px; 
 
    width: 250px 
 
} 
 
.sidebar { 
 
    background: blue; 
 
} 
 
.section { 
 
    background: red; 
 
}

<div> 
 
    <div class="header-area"> 
 
    <h3 id="genericpartTitle">Our album</h3> 
 
    </div> 
 
    <div class="content"> 
 
    <div class="sidebar"> hello! </div> 
 
    <div class="section"> 
 
     <h5 class="item-title">Welcome to my section</h5> 
 
     <p style="white-space: pre" class="description"> Hello, anything will go here </p> 
 
    </div> 
 
    </div> 
 
</div>

は、それらは互いに横に並ぶことになっていませんか？ここで何がうまくいかないの？どんな助けも素晴らしいだろう。

Answer 1

vertical-alignを追加するだけです。サイドバークラスとセクションクラスの両方で使用できます。以下のコードをチェックアウトしてください。

.content .sidebar, .content .section{ 
 
    display: inline-block; 
 
    border: none; 
 
    min-height: 200px; 
 
    width: 250px 
 
} 
 

 
.sidebar{ 
 
    background: blue; 
 
    vertical-align: top; 
 
} 
 
.section{ 
 
    background: red; 
 
    vertical-align: top; 
 
}

<div> 
 
    <div class="header-area"> 
 
     <h3 id="genericpartTitle">Our album</h3> 
 
    </div> 
 
    <div class="content"> 
 
     <div class="sidebar"> 
 
      hello! 
 
     </div> 
 

 
     <div class="section"> 
 
      <h5 class="item-title">Welcome to my section</h5> 
 
      <p style="white-space: pre" class="description"> 
 
       Hello, anything will go here 
 
      </p> 
 
     </div> 
 
    </div> 
 
</div>