Question

我在使用媒体查询将div定位到右侧时遇到了问题。

HTML

<div class="container">
  <div class="left"></div>
</div>

CSS

body,html { height:100%; }

.container {
  width:1000px;
  height:100%;
  background:#eee;
  position:relative;
}

.left {
  height:100%;
  width:200px;
  background:orange;
  position:absolute;
  left:0;
}

@media only screen and (max-width: 700px) {
  .left {
    position:absolute !important;
    right:0 !important;
   }
 }

左侧div绝对位于左侧。当我的媒体查询以700px宽度触发时，我想绝对将相同的div放在右边。

问题在于它不会这样做！我尝试过使用！important。我试图重申媒体查询中的立场。没有！

奇怪的是，如果我开始将div绝对定位在右边，并且使用媒体查询，绝对将div放在左边。有用！什么？为什么？

DIV绝对位于左侧，媒体查询将DIV置于右侧没有工作

http://jsfiddle.net/zfdmmyaz/

DIV绝对定位在右侧，媒体查询将DIV带到左侧这个工作

http://jsfiddle.net/md07a02t/

我如何让它工作？当触发媒体查询时，如何让我的绝对左侧定位div绝对位于右侧？

Answer 1

您需要将left值重置为auto，然后设置right值。

jsfiddle

@media only screen and (max-width: 700px) {
    .left {
        position: absolute;
        left: auto;
        right: 0;
        background: lime;
    }
}

Answer 2

使用float而不是left。此外，您不需要将.left div设为绝对值，因为它绝对会定位于它的相对容器。

HTML

<div class="container">
  <div class="left">Content</div>
  <div class="clear"></div>
</div>

CSS

body,html { height:100%; }

.container {
  width:1000px;
  height:100%;
  background-color:#eee;
  position:relative;
  border: 1px #000000 solid;
}

.left {
  height:100%;
  width:200px;
  background-color:orange;
  float: left;
}

.clear {
    clear:both;
}

@media only screen and (max-width: 700px) {
    .container {
        width:100%;
    }

    .left {
        float: right !important;
    }
 }

如何使用媒体查询从左到右绝对定位div？

2 个答案: