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

Answer 2

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

How do I absolute position a div from left to the right using media queries?

css

media-queries

responsive-design