css - 如何使用媒体查询将 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 绝对定位在左边。当我的媒体查询以 700 像素宽度触发时，我想将同一个 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;
    }
}