将内联块应用于div,但仍然很奇怪

时间:2016-12-10 06:54:07

标签: html css

我正在尝试使用内联块技术将两个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>

他们不应该在彼此旁边对齐吗?这里出了什么问题?任何帮助都会很棒。

1 个答案:

答案 0 :(得分:3)

你只需要添加vertical-align:top;对于侧边栏和部分类。查看下面的代码。

&#13;
&#13;
.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;
}
&#13;
<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>
&#13;
&#13;
&#13;