Div就像内联一样

Question

我无法解释为什么我的Div表现得像内联一样。您可以在下面的页面上看到蓝色边框：

我的代码是这样的：

<div class="welcome">
    **some content**     
</div>
<div class="quote">
    hello
</div>

.welcome {
  width: 70%;
  height: 500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 40% 60%; 
}

.quote { 
  color: #5192BC; 
  width: 100%;
  height: 70px;
  border: 1px solid #5192BC;
  padding: 1px;
}

我尝试将quote作为一个块并清除，但都没有奏效。我觉得可能是因为welcome是一个网格，但不知道解决方案。

我的git是here。

Answer 1

.welcome div上的显式高度导致它像块组件一样，设置高度为500px。

删除该特定高度属性将允许'hello'div位于网格容器之后。

应该是这样的：

.welcome {
  width: 70%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 40% 60%; 
}