(HTML/CSS) 内联块元素未水平并排排列

Question

我不太明白为什么下面的两个块（section.struct 和section.speciality）没有对齐。当我减小宽度（超过某个数字，不确定这到底是多少）时，它们会排队。

我需要大约 500px 的宽度（或者每个块大约占据屏幕宽度的一半），但是当我这样做时，它们会堆叠在一起。有什么想法吗？

HTML

<main>
      <section class= "structure">

      </section>

      <section class= "specificity">

      </section>

CSS

section.structure {
    border-radius: 20px;
    height: 500px;
    width: 500px;
    background-color: rgb(255, 255, 255);
    margin: 10px;
    border: rgb(245,245, 245);
    display: inline-block;
}

section.specificity {
    border-radius: 20px;
    height: 500px;
    width: 500px;
    background-color: rgb(255, 255, 255);
    margin: 10px;
    border: rgb(245,245, 245);
    display: inline-block;
}

更改宽度测量值，垂直对齐。没有变化。

Answer 1

如果您不限于使用

display: inline-block

，您可以使用flexbox。
如果需要在两个元素之间创建空间，可以使用

gap

属性。另外，我建议不要以像素为单位设置固定的

height

和

width

，因为布局响应可能会出现问题 HTML：

main {
  display: flex;
}

section {
  border: 1px solid red;
  width: 50%;
  height: 100vh;
}

<main>
 <section class="structure">hi</section>
  <section class="specificity">hello</section>
</main>