html - 两个相邻 div 的 CSS 样式

Question

我有一个 section 元素。因为我创建了两个相邻的元素 article 和 aside (inline-block) 。该文章有两个子 div( block )。结果显示可以在代码片段中看到。在结果显示中，内容变得不等高。当内容高度不等时，顶部会出现空隙。如何在语义上修复它？

article,aside{
display:inline-block;
  width:40%;
  box-sizing:border-box;
}
#div-1,#div-2{

display:block;
}

<section>
<article>
      <div id='div-1'>Lorem IpsumLorem IpsumLorem Ipsum<br>Lorem IpsumLorem IpsumLorem Ipsum<br>Lorem IpsumLorem IpsumLorem Ipsum<br>Lorem IpsumLorem IpsumLorem Ipsum<br>Lorem IpsumLorem IpsumLorem Ipsum<br></div>
      <div id='div-2'>Lorem IpsumLorem IpsumLorem Ipsum<br>Lorem IpsumLorem IpsumLorem Ipsum<br>Lorem IpsumLorem IpsumLorem Ipsum<br>Lorem IpsumLorem IpsumLorem Ipsum<br>Lorem IpsumLorem IpsumLorem Ipsum<br>Lorem IpsumLorem IpsumLorem Ipsum<br></div>
  
</article>
  <aside>dummy texstdummy texstdummy texstdummy texst<br>dummy texstdummy texstdummy texstdummy texst<br>dummy texstdummy texstdummy texstdummy texst<br>dummy texstdummy texstdummy texstdummy texst<br>dummy texstdummy texstdummy texstdummy texst<br>dummy texstdummy texstdummy texstdummy texst<br>dummy texstdummy texstdummy texstdummy texst<br>dummy texstdummy texstdummy texstdummy texst<br></aside>
</section>

Answer 1

你必须像这样设置垂直对齐:

article, aside {
    display: inline-block;
    width: 40%;
    vertical-align: top;
    box-sizing: border-box;
}