我如何绝对位置一个div从左到右使用媒体查询

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。另外，你不需要将。leftdiv设置为绝对的，因为它将被绝对定位到它的相对容器中。

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;
    }
 }