html - 将内联 block 应用于 div，但仍然很奇怪

Question

我正在尝试使用内联 block 技术将两个 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: top;对于侧边栏和部分类。检查下面的代码。

.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>