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