css - 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 设为 block 并清除，但均无效。我感觉可能是因为welcome是一个grid但是不知道怎么解决。

我的 git 是 here .

Answer 1

.welcome div 的显式高度导致它像设置高度为 500 像素的 block 组件一样工作。

删除特定的高度属性将使“hello”div 位于网格容器之后。

应该看起来像这样:

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