如何使用媒体查询将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移到右侧。 不起作用。

http://jsfiddle.net/zfdmmyaz/

使用媒体查询将DIV绝对定位到右侧，使其移动到左侧。
这个有效。

http://jsfiddle.net/md07a02t/

我该怎么做才能让它工作？当媒体查询被触发时，我如何使我的绝对左定位的div绝对定位到最右边？

- Wee Wee

Answer 1

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

jsfiddle

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

- Stickers

---

谢谢！它有效了！你能解释一下为什么这样行得通吗？如果我最初以绝对定位到右侧开始，为什么我可以使用媒体查询绝对定位到左侧而没有问题，但反之则不行呢？ - Wee Wee

你只能同时设置左边或右边（顶部或底部），除非你想让元素的宽度/高度拉伸以覆盖整个相对容器。 - Stickers

一个快速演示，展示当你将所有值都设置时会发生什么 :) - Stickers

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

- DMilner

---

谢谢提供另一种选择。我尝试在我的模板上使用浮动，它也可以工作。但是它会占用空间，因为它会移动我的div以为该div腾出空间。我需要一些不会移动任何东西而覆盖模板的东西。谢谢！ - Wee Wee