在响应视图中，边框未显示在 div 上答案

【问题标题】：In responsive view border is not showing on divs在响应视图中，边框未显示在 div 上
【发布时间】：2016-11-10 03:45:20
【问题描述】：

问题：我下面的代码在桌面或横向设备上运行良好。但是当我切换到移动/响应视图时，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;
        }
}

【问题讨论】：

你好像在.ah-logo {之前错过了}

标签： html css responsive-design sass responsive

【解决方案1】：

将您的@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>

【讨论】：