为何Div元素表现得如同inline？grid布局相关问题求助

我帮你分析下，你的.quote div看起来像inline元素，大概率和样式冲突或者父容器的布局有关，虽然你怀疑和.welcome的grid布局相关，但先从这几个方向排查：

1. 先检查样式有没有被覆盖 #

打开浏览器的开发者工具（按F12就行），做这两件事：

• 点选.welcome元素，看看display: grid是不是真的生效了，有没有被别的优先级更高的样式（比如带!important的规则、id选择器）给覆盖了；
• 再点选.quote元素，确认display: block有没有生效，会不会有其他规则偷偷把它改成了inline或者inline-block。

2. 强制让.quote独占一行 #

要是没找到明显的样式冲突，你可以试试给.quote加这两行样式，强制它变成块级元素并清除周边布局影响：

.quote {
  color: #5192BC;
  width: 100%;
  height: 70px;
  border: 1px solid #5192BC;
  padding: 1px;
  /* 新增的两行 */
  display: block !important;
  clear: both;
}

3. 看看父容器是不是搞了Flex布局 #

如果上面的方法没用，你得检查一下.welcome和.quote的共同父容器（比如<body>或者其他包裹它们的容器）有没有设置display: flex。要是父容器用了Flex布局，子元素默认会在一行排列，这时候你可以：

• 给父容器加flex-wrap: wrap;，让子元素自动换行；
• 或者直接给.quote加flex-basis: 100%;，强制它占满整行宽度。

4. 确认Grid容器的块级属性 #

.welcome设置display: grid后，默认是块级元素，应该会独占一行，.quote本来就该在它下面。如果它没表现成块级，那肯定是有别的样式改了它的display属性，比如不小心写成了inline-grid，这时候你得找到那个冲突的规则删掉，或者用display: grid !important;把它覆盖回来。

按照这些步骤一步步查，应该就能解决问题啦。

内容的提问来源于stack exchange，提问作者leto