CSS覆盖/忽略小屏幕媒体查询的'display：inline-grid'

时间：2018-06-05 08:18:21

标签： html css

我遇到了一个前端博客网站原型模板的问题。它包含五个主要的div - 顶部导航栏，博客横幅图像的“窗口”，个人资料照片和博客名称，“blogPosts”包含来自用户的帖子，其中'display:inline-block'设置为“sidePosts”使用'display:inline-block'向最近和热门帖子的右侧浮动，然后在页面底部显示“NavBar”div。

我更新了CSS，因此默认情况下它对blogPosts和SidePosts使用'display:inline-grid'，当屏幕大于600像素时更改为'display:inline-block'，但div仍默认为浮动的一面侧面图。 Chrome调试显示'display:inline-block'因任何原因覆盖'display:grid'。当我使用网格而不是内联网格时，同样的问题。最初我有一个名为id的div #BlogPosts，而个别帖子保存在名为class的{​​{1}}中，因此在看到Zuber的评论后我将其重命名为.blogPost看看是否能解决问题，但没有任何区别。有关如何解决此问题的任何建议吗？

.post
//classes set first

.page{
	font-family:"Trebuchet MS", Helvetica, sans-serif;
	height:100%;
}

.post{
	display:inline-block;
	float:left;
	position:relative;
	//removed background color to improve visual design
    //background-color:#e0e1e2;
    margin-left:6%;
	margin-bottom:1%;
    max-width:100%;
    border-radius:1%;
	right:none;
}

.post h1{
    margin-bottom:none;
    padding-bottom:none;
}

.post2{
	display:inline-block;
	position:relative;
	//removed background color to improve visual design
    //background-color:#e0e1e2;
    margin-left:6%;
	margin-bottom:1%;
    max-width:85%;
    border-radius:1%;
	right:none;
}

.post2 a{
	text-decoration:none;
	color:black;
}

.pageNav{
	bottom:0;
    width:100%;
    max-width:100%;
    text-align:center;
	display:inline-block;
	font-family:"Trebuchet MS", Helvetica, sans-serif;
	font-size:1.2em;
}

.pageNav p{
	display:inline;
}

.pageNav a{
	text-decoration:none;
	color:black;
}

#blogPosts{
	display:grid;
}

#SidePosts{
	display:grid;
}

//set color to blue to debug if media query active
body{
	background-color:lightblue;
}

/*
@media screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
	
	#blogPosts{
		display:inline-grid;
	}
	
	#SidePosts{
		display:inline-grid;
	}
	
}
*/

@media screen and (max-width:2000px){
	
.page{
	font-family:"Trebuchet MS", Helvetica, sans-serif;
	height:100%;
}
	
body{
	background-color:white;
}

#window{
	width:100%;
	max-width:100%;
	min-height:40%;
	text-align:center;
}

#banner{
	position:relative;
	min-width:100%;
	max-width:100%;
	//min-height:20%;
	height:25.5em;
	object-fit:cover;
	z-index:1;
}

#avatar{
	position:absolute;
	max-width:10%;
	bottom:33%;
	left:45.5%;
	z-index:2;
	border-style:solid;
}

#window h1{
	position:relative;
	margin-top:5%;
	margin-left:1%;
}

#blogPosts{
	display:inline-grid;
	display:block;
	width:60%;
	float:left;
	margin-left:4%;
}

#SidePosts{
	//display:inline-grid;
	display:inline-block;
	float:right;
	background-color: #e0e1e2;
	width:28%;
	padding-left:2%;
	margin-right:2%;
	margin-bottom:2%;
	border-radius:4%;
}

#SidePosts a{
	text-decoration:none;
	color:black;
}

#sidePosts h1{
	margin-top:none;
}

/* Code taken from W3Schools for nav bar.*/

/* Add a black background color to the top navigation bar */
.topnav {
    overflow: hidden;
    background-color: #e9e9e9;
````display:grid;
    grid-column: 1 / 12;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Style the "active" element to highlight the current page */
.topnav a.active {
    background-color: #2196F3;
    color: white;
}

/* Style the search box inside the navigation bar */
.topnav input[type=text] {
    float: right;
    padding: 6px;
    border: none;
    margin-top: 8px;
    margin-right: 16px;
    font-size: 17px;
}

/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally 
@media screen and (max-width: 600px) {
    .topnav a, .topnav input[type=text] {
        float: none;
        display: block;
        text-align: left;
        width: 100%;
        margin: 0;
        padding: 14px;
    }
    .topnav input[type=text] {
        border: 1px solid #ccc;
    }
}
*/

}

1 个答案:

答案 0 :(得分：0)

我在这个问题上坚持了好几个小时后终于找到了解决方案！我通过改变CSS结构的方式来修复它 - 现在默认为移动屏幕设置了许多CSS样式，包括博客文章容器div的X-XSRF-TOKEN设置，然后使用样式进行更大的屏幕使用媒体查询display:grid。将@media screen and (min-width:700px)更改为max会使代码生效。您可以在下面找到更新后的网站：

＆＃13;
＆＃13; 
min
＆＃13; 
//classes set first

/* Code taken from W3Schools for nav bar.*/

/* Add a black background color to the top navigation bar */
.topnav {
    overflow: hidden;
    background-color: #e9e9e9;
````display:grid;
    grid-column: 1 / 12;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Style the "active" element to highlight the current page */
.topnav a.active {
    background-color: #2196F3;
    color: white;
}

/* Style the search box inside the navigation bar */
.topnav input[type=text] {
    float: right;
    padding: 6px;
    border: none;
    margin-top: 8px;
    margin-right: 16px;
    font-size: 17px;
}

/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally 
@media screen and (max-width: 600px) {
    .topnav a, .topnav input[type=text] {
        float: none;
        display: block;
        text-align: left;
        width: 100%;
        margin: 0;
        padding: 14px;
    }
    .topnav input[type=text] {
        border: 1px solid #ccc;
    }
}
*/

.page{
	font-family:"Trebuchet MS", Helvetica, sans-serif;
	height:100%;
}

.post{
	display:inline-block;
	float:left;
	position:relative;
	//removed background color to improve visual design
    //background-color:#e0e1e2;
    margin-left:6%;
	margin-bottom:1%;
    max-width:100%;
    border-radius:1%;
	right:none;
}

.post h1{
    margin-bottom:none;
    padding-bottom:none;
}

.post2{
	display:inline-block;
	position:relative;
	//removed background color to improve visual design
    //background-color:#e0e1e2;
    margin-left:6%;
	margin-bottom:1%;
    max-width:85%;
    border-radius:1%;
	right:none;
}

.post2 a{
	text-decoration:none;
	color:black;
}

.pageNav{
	bottom:0;
    width:100%;
    max-width:100%;
    text-align:center;
	display:inline-block;
	font-family:"Trebuchet MS", Helvetica, sans-serif;
	font-size:1.2em;
}

.pageNav p{
	display:inline;
}

.pageNav a{
	text-decoration:none;
	color:black;
}

body{
	font-family:"Trebuchet MS", Helvetica, sans-serif;
}

#window{
	width:100%;
	max-width:100%;
	min-height:40%;
	text-align:center;
}

#banner{
	position:relative;
	min-width:100%;
	max-width:100%;
	//min-height:20%;
	height:15.5em;
	object-fit:cover;
	z-index:1;
}

#avatar{
	position:absolute;
	max-width:15%;
	bottom:52%;
	left:43.5%;
	z-index:2;
	border-style:solid;
}

#window h1{
	position:relative;
	margin-top:5%;
	margin-left:1%;
}

#blogPosts{
	display:grid;
}

#SidePosts{
	display:grid;
	background-color: #e0e1e2;
	border-radius:5%;
}

#SidePosts a{
	text-decoration:none;
	color:black;
	margin-left:4%;
	font-size:0.8em;
}

//set color to blue to debug if media query active
body{
	background-color:lightblue;
}

/*
@media screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
	
	#blogPosts{
		display:inline-grid;
	}
	
	#SidePosts{
		display:inline-grid;
	}
	
}
*/

@media screen and (min-width:700px){
	
body{
	background-color:white;
}

#blogPosts{
	display:inline-grid;
	display:block;
	width:60%;
	float:left;
	margin-left:4%;
}

#SidePosts{
	//display:inline-grid;
	display:inline-block;
	float:right;
	width:28%;
	padding-left:2%;
	margin-right:2%;
	margin-bottom:2%;
}

#sidePosts h1{
	margin-top:none;
}

#banner{
	height:25.5em;
}

#avatar{
	position:absolute;
	max-width:10%;
	bottom:28%;
	left:45.5%;
	z-index:2;
	border-style:solid;
}

}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题