Question

在this website上，当视口宽度减小到595像素或更低时，应该应用以下CSS：

@media (max-width:595px) {
    #header-left,#header-right {
        display: block;
        width: 100%;
        float: none;
    }
}

浏览器正在识别CSS，但它似乎处于活动状态，但#header-left（包含徽标）不是100％宽，或者是#header-right（包含电话号码）。< / p>

即#header-left＆amp; #header-right仍然试图占据宽度的一半，并排显示，而不是相互上下。

为什么会这样？感谢。

Answer 1

从position:absolulte;移除#logo {position: absolute;top: 0px;left: 0px;}并从#menu移除然后您的代码正常运行。

Answer 2

您应该在特定于595px大小的CSS中覆盖以下注释规则：

#logo {
  /* position: absolute; */
  /* top: 0px; */
  /* left: 0px; */
}
#header-right {
  width: 50%;
  float: right;
  padding-top: 8px;
  /* text-align: right; */
}
#menu {
  /* position: absolute; */
  /*top: 80px;*/
  /*left: 0px;*/
  background: url(images/menu-bg.png) no-repeat;
  width: 960px;
  height: 55px;
}

注意：覆盖评论规则

CSS：float：none;被忽略了

2 个答案: