Html CSS覆盖/忽略'；显示：内联网格'；关于小屏幕的媒体查询

我有一个前端博客网站原型模板的问题。它包含五个主要分区-一个顶部导航栏，一个用于显示博客横幅图像、个人资料照片和博客名称的“窗口”，一个包含用户发布的帖子的“博客帖子”用

'display:inline block'

设置向左浮动，“sidePosts”用

'display:inline block'

设置向右浮动，然后是一个“导航栏”在页面底部添加div

我更新了CSS，因此默认情况下，它使用

'display:inline grid'

作为博客文章和侧帖，当屏幕大于600像素时，更改为

'display:inline block'

，但div仍然默认为浮动并排视图。Chrome调试显示，无论出于何种原因，

'display:inline block'

覆盖了

'display:grid'

。当我使用网格而不是内联网格时，也存在同样的问题。最初我有一个div

id

名为

#BlogPosts

，而单独的帖子保存在一个名为

.blogPost

的

类中，因此在看到Zuber的评论后，我将其重命名为
.post
，看看这是否能解决问题，但这没有什么区别。有没有关于如何解决这个问题的建议


//先设置类
.第页{
字体系列：“投石机MS”，Helvetica，无衬线；
身高：100%；
}
.邮政{
显示：内联块；
浮动：左；
位置：相对位置；
//删除背景色以改进视觉设计
//背景色：#e0e1e2；
左缘：6%；
利润底部：1%；
最大宽度：100%；
边界半径：1%；
右：无；
}
.上半年后{
页边距底部：无；
底部填充：无；
}
.post2{
显示：内联块；
位置：相对位置；
//删除背景色以改进视觉设计
//背景色：#e0e1e2；
左缘：6%；
利润底部：1%；
最大宽度：85%；
边界半径：1%；
右：无；
}
.post2a{
文字装饰：无；
颜色：黑色；
}
.pageNav{
底部：0；
宽度：100%；
最大宽度：100%；
文本对齐：居中；
显示：内联块；
字体系列：“投石机MS”，Helvetica，无衬线；
字体大小：1.2米；
}
.pageNav p{
显示：内联；
}
.页面导航a{
文字装饰：无；
颜色：黑色；
}
#博客帖子{
显示：网格；
}
#侧柱{
显示：网格；
}
//如果媒体查询处于活动状态，请将颜色设置为蓝色以进行调试
身体{
背景颜色：浅蓝色；
}
/*
@媒体屏幕和屏幕（最大宽度：600px）{
身体{
背景颜色：浅蓝色；
}
#博客帖子{
显示：内联网格；
}
#侧柱{
显示：内联网格；
}
}
*/
@媒体屏幕和屏幕（最大宽度：2000px）{
.第页{
字体系列：“投石机MS”，Helvetica，无衬线；
身高：100%；
}
身体{
背景色：白色；
}
#窗口{
宽度：100%；
最大宽度：100%；
最小高度：40%；
文本对齐：居中；
}
#横幅{
位置：相对位置；
最小宽度：100%；
最大宽度：100%；
//最小高度：20%；
身高：25.5公分；
对象匹配：覆盖；
z指数：1；
}
#化身{
位置：绝对位置；
最大宽度：10%；
底部：33%；
左：45.5%；
z指数：2；
边框样式：实心；
}
#窗口h1{
位置：相对位置；
利润率最高：5%；
左缘：1%；
}
#博客帖子{
显示：内联网格；
显示：块；
宽度：60%；
浮动：左；
左缘：4%；
}
#侧柱{
//显示：内联网格；
显示：内联块；
浮动：对；
背景色：#e0e1e2；
宽度：28%；
左：2%；
保证金权利：2%；
利润底部：2%；
边界半径：4%；
}
#侧柱{
文字装饰：无；
颜色：黑色；
}
#侧柱h1{
页边顶部：无；
}
/*代码取自W3学校的导航栏*/
/*向顶部导航栏添加黑色背景色*/
托普纳夫先生{
溢出：隐藏；
背景色：#e9e9e9；
````显示：网格；
网格柱：1/12；
}
/*设置导航栏内链接的样式*/
.topnav a{
浮动：左；
显示：块；
颜色：黑色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
/*更改悬停时链接的颜色*/
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
/*设置“活动”元素的样式以突出显示当前页面*/
.topnav a.active{
背景色：#2196F3；
颜色：白色；
}
/*在导航栏中设置搜索框的样式*/
.topnav输入[类型=文本]{
浮动：对；
填充：6px；
边界：无；
边缘顶部：8px；
右边距：16px；
字号：17px；
}
/*当屏幕宽度小于600px时，垂直堆叠链接和搜索字段，而不是水平堆叠
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav a、.topnav输入[类型=文本]{
浮动：无；
显示：块；
文本对齐：左对齐；
宽度：100%；
保证金：0；
填充：14px；
}
.topnav输入[类型=文本]{
边框：1px实心#ccc；
}
}
*/
}

博客。
乔的博客
职称
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一种发酵剂。Sed scelerisque lacus和congue调味品。Morbi eu purus id mauris lobortis bibendum。我是一只老鼠。梅塞纳苏打粉发酵菌turpis a vehicula。阿利奎姆只是一个小酒鬼。
2012年1月2日下午3:34

随机性、生产力、音乐
职称
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一种发酵剂。Sed scelerisque lacus和congue调味品。Morbi eu purus id mauris lobortis bibendum。我是一只老鼠。梅塞纳苏打粉发酵菌turpis a vehicula。阿利奎姆只是一个小酒鬼。
2012年1月2日下午3:34

随机性、生产力、音乐
职称
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一种发酵剂。Sed scelerisque lacus和congue调味品。Morbi eu purus id mauris lobortis bibendum。我是一只老鼠。梅塞纳苏打粉发酵菌turpis a vehicula。阿利奎姆只是一个小酒鬼。
2012年1月2日下午3:34

随机性、生产力、音乐
职称
Lorem ipsum dolor sit amet，是一位杰出的献身者。布朗迪特酒店