问题:我的以下代码在桌面或横向设备上运行良好。但是当我切换到移动/响应式 View 时,div 边框没有显示。我不知道我在下面的代码中做错了什么。请有人把我从这个小问题中解救出来。
头部代码:
<meta name="viewport" content="width=device-width, initial-scale=1">
HTML 代码:
<div class="ah-header">
<div class="ah-logo"></div>
<div class="ah-navbar-searchbar"></div>
<div class="ah-nav"></div>
</div>
CSS 代码:
.ah-header {
padding: 9px;
background-color: rgb(25, 118, 210);
display: table;
width: 100%;
min-height: 50px;
max-height: 150px;
.ah-logo {
display: table-cell;
width: 250px;
border: 1px solid yellow;
}
.ah-navbar-searchbar {
display: table-cell;
position: relative;
/* Firefox */
width: -moz-calc(100% - 500px);
/* WebKit */
width: -webkit-calc(100% - 500px);
/* Opera */
width: -o-calc(100% - 500px);
/* Standard */
width: calc(100% - 500px);
border: 1px solid yellow;
}
.ah-nav {
display: table-cell;
position: relative;
/* Firefox */
width: 250px;
border: 1px solid yellow;
}
@media only screen and (max-width : 320px) {
.ah-header {
padding: 0px !important;
display: block !important;
max-height: 150px !important;
}
.ah-logo, .ah-navbar-searchbar, .ah-nav {
display: table-row !important;
border: 1px solid yellow;
height: 50px !important;
}
}
最佳答案
将您的@media
查询的.ah-logo, .ah-navbar-searchbar, .ah-nav
规则设置为display: block;
而不是 display: table-row
旁注,我删除了所有 !important
,因为这里不需要它们,而且您在 .ah-header 上遗漏了括号
规则}
.ah-header {
padding: 9px;
background-color: rgb(25, 118, 210);
display: table;
width: 100%;
min-height: 50px;
max-height: 150px;
}
.ah-logo {
display: table-cell;
width: 250px;
border: 1px solid yellow;
}
.ah-navbar-searchbar {
display: table-cell;
position: relative;
/* Firefox */
width: -moz-calc(100% - 500px);
/* WebKit */
width: -webkit-calc(100% - 500px);
/* Opera */
width: -o-calc(100% - 500px);
/* Standard */
width: calc(100% - 500px);
border: 1px solid yellow;
}
.ah-nav {
display: table-cell;
position: relative;
/* Firefox */
width: 250px;
border: 1px solid yellow;
}
@media only screen and (max-width: 320px) {
.ah-header {
padding: 0px;
display: block;
max-height: 150px;
}
.ah-logo,
.ah-navbar-searchbar,
.ah-nav {
display: block;
border: 1px solid yellow;
height: 50px;
}
}
<div class="ah-header">
<div class="ah-logo"></div>
<div class="ah-navbar-searchbar"></div>
<div class="ah-nav"></div>
</div>
关于html - 在响应式 View 中,边框未显示在 div 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40514679/