需要在响应主题中更改div位置

Question

Sample Code（我正在限制开发服务器上的Drupal站点上工作，但这是指向该文件的静态html版本的链接）

我有以下css在第一张图片中生成页面。

#slideshow_block {
  position: relative;
  min-height: 280px;
}

#slideshow_floater {
  position: absolute;
  top: 20%;
  left: 10%;
  width: 55%;
  height: 40%;  
}

如果我按如下方式修改代码，那么我会在下一张图片中找到该页面。

.region-slideshow {
  display: none;
}

#slideshow_block {
  position: relative;
}

#slideshow_floater {
  position: relative;
  top: 1px;
  left: 1px;
  width: 100%;
  height: 40%;  
}

我想要做的是让页面像大于640px的屏幕尺寸的第一张图片。然后，一旦屏幕尺寸低于640px，则在背景中隐藏幻灯片，并使搜索框的宽度与第二张图像中的宽度相似。 我已将两段CSS代码添加到媒体CSS中的相应部分，但它似乎只响应了区域幻灯片display:none部分。它似乎没有调整位置，顶部或左侧属性。这就是我得到的。

有任何帮助吗？提前谢谢。

Answer 1

你@import你css到html文件所以它就像内部css，在这种情况下，样式将覆盖你的媒体查询，所以你的媒体查询的风格不被接受

您有2个选项，可以在媒体查询中将!important添加到#slideshow_floater

@media screen and (max-width: 640px)
  #slideshow_floater {
    position: relative !important;
    top: 1px !important;
    left: 1px !important;
    width: 100% !important;
    height: 40% !important;
  }
}

或者对我来说最好的是在导入时重新排列css文件。现在你像这样导入它们：

<style type="text/css" media="all">
    @import url("files/font-awesome.css?o7n8rh");
    @import url("files/style.css?o7n8rh");
    @import url("files/media.css?o7n8rh");
    @import url("files/ksu.css?o7n8rh");
</style>

你只需要让media.css成为最后一个文件，这样它的风格就无法覆盖

<style type="text/css" media="all">
    @import url("files/font-awesome.css?o7n8rh");
    @import url("files/style.css?o7n8rh");
    @import url("files/ksu.css?o7n8rh");
    @import url("files/media.css?o7n8rh");
</style>