html - Div 定位(y 轴)与之前的 div y 轴位置相同，不需要的行为

Question

所以我有这个表示数学公式的数组。对于方程 a/b，结构是

[[a],/,[b]]

我已经让它在 React 上工作并且可以正确显示值，问题是最后一个 div 的定位，它采用前一个 div 的 y 轴。预期结果:

 ________________
| |     a      | |
|1|------------|2|
| |     b      | |
------------------

div 的创建过程为:div1、div a、中间线、div b、div 2。div 2 的行为方式采用 div b 的 y 轴(顶部位置)。这是我得到的:如您所见，突出显示的 div 2 的顶部位置位于容器的中间，如果“列”上没有更多空间，我想要一些可以自动将 div 放在顶部的东西。请记住，这应该是可变的，方程式数组可以改变。我基本上尝试过放置 display inline、inline-block、block 等都无济于事，再加上向左浮动，甚至在最后一个上向左 + 向右浮动，但仍然没有成功。 Codepen 试图复制我的问题:https://codepen.io/dariovillalta/pen/yLLrgEw

Answer 1

使用 CSS 网格布局:

body {
  margin: 0;
}

.app {
  height: 100vh;
  display: grid;
  grid-template-columns: 5% 90% 5%;
  grid-template-rows: 49% 2% 49%;
  text-align: center;
}

.highlight {
  background-color: #F9D342;
  grid-row: 1 / span 3;
}
.highlight.left {
  grid-column: 1 / span 1;
}
.highlight.right {
  grid-column: 3 / span 1;
}

.middleSection {
  background-color: #bbdefb;
  grid-column: 2 / span 1;
}
.middleSection.top {
  grid-row: 1 / span 1;
}
.middleSection.bottom {
  grid-row: 3 / span 1;
}

<div class="app">
  <div class="highlight left">
    \
  </div>
  <div class="middleSection top">
    a
  </div>
  <div class="divisionSign">
  </div>
  <div class="middleSection bottom">
    b
  </div>
  <div class="highlight right">
    \
  </div>
</div>