如何使用媒体查询从左到右绝对定位 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 绝对定位在右侧。

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

奇怪的是，如果我从 div 绝对定位在右侧开始，而对于媒体查询，则将 div 绝对定位在左侧。有用！ 什么？为什么？

DIV 绝对位于左侧，通过媒体查询将 DIV 置于右侧。
不工作

http://jsfiddle.net/zfdmmyaz/

DIV 绝对位于右侧，使用媒体查询将 DIV 置于左侧。
这工作

http://jsfiddle.net/md07a02t/

如何让它工作？触发媒体查询时，如何让绝对左侧的 div 将自己绝对定位到右侧？

Answer 1

使用浮动而不是左。此外，您不需要将 .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;
    }
 }

Answer 2

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

jsfiddle

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