更改格窗口的位置是在調整

Question

大家好我有兩個div的辦事指南，滑塊

<div id="topcontent"> 
    <div id="latestnews"> Content1 </div> 
    <div id="slider"> content2 </div> 
</div> 

，我使用的是

#topcontent { 
    height:auto; 
    margin-top:15px; 
    overflow:hidden; 
} 
#latestnews { 
width:32%; 
float:left; 
height:auto; 
} 

#slider { 
margin:0 33%; 
width:67%; 
position:relative; 

} 

@media handheld, only screen and (max-width: 767px) { 

#latestnews { 
    float:none; 
    width:100%; } 
#slider { 
    margin:0; 
    width:100%; } 
} 

以下CSS時寬度767px內容1處達到首先再content2的地方，實際上當寬度達到767px時需要先放置content2。如何重新排列不同寬度的div。請幫幫我。

Answer 1

使用浮動也#slider而不是margin: 0 33%;

#slider { 
/*margin:0 33%;*/ 
float: right; 
width:67%; 
position:relative; 

} 

Answer 2

使用Float:right屬性來實現這一

http://jsfiddle.net/Lubuu/7/演示

Answer 3

嘗試position屬性和浮到左。

@media handheld, only screen and (max-width: 767px) { 

    #latestnews { 
    float:left; 
    width:100%; 
    position:relative; 
    } 

    #slider { 
    margin:0; 
    width:100%; 
    float:left; 
    position:absolute; 
    } 

} 

Answer 4

以下是使用絕對定位的方法。

@media handheld, only screen and (max-width: 767px) { 
    #topcontent { 
     position: relative; 
    } 
    #latestnews { 
     margin: 51px 0 0 0; 
     width: 100%; 
     color: red; 
    } 
    #slider { 
     position: absolute; 
     top: 0; 
     left: 0; 
     right: 0; 
     margin:0; 
     width: auto; 
     height: 50px; 
     display: inline-block; 
     border: 1px dotted blue; 
    } 
} 

如果你有一個滑塊，你可能有一個固定的高度。如果是這種情況，請將#slider絕對定位到父塊的頂部，然後向#latestnews元素添加頂部邊距以避免元素重疊。

見演示在：http://jsfiddle.net/audetwebdesign/8mJNV/

或者，你可以使用JavaScript或jQuery的重新安排DOM元素，然後用浮動。