如何使用媒體查詢從左向右絕對定位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; 
    } 
}