Div的堆疊在彼此的頂部，只是沒有正確的順序

我有一對夫婦並排放置並使用媒體查詢堆疊它們，他們堆疊但我需要黃色的頂部和它下面的藍色。與腳本運行時看到的內容相反，不確定如何執行此操作。Div的堆疊在彼此的頂部，只是沒有正確的順序

#wrapper { 
 
    width:1000px; 
 
} 
 
#mydivLeft { 
 
    background:blue; 
 
    height:250px; 
 
    width:50%; 
 
    float:left; 
 
} 
 

 
#mydivRight { 
 
    background:yellow; 
 
    height:250px; 
 
    width:50%; 
 
    float:right; 
 
} 
 

 
@media only screen and (max-width:768px){ 
 
    #wrapper { 
 
     width:100%; 
 
    } 
 

 
    #mydivRight, #mydivLeft { 
 
     display:block; 
 
     float:none; 
 
     width:100%; 
 
    } 
 

 
}

<body> 
 
    <div id="wrapper"> 
 
     <div id="mydivLeft"> 
 
     </div> 
 
     <div id="mydivRight"> 
 
     </div> 
 
    </div> 
 
</body>

來源

2017-01-22 Chris

你可以只扭轉的div的順序在HTML是你想他們是什麼順序。

#wrapper { 
 
    width:1000px; 
 
} 
 
#mydivLeft { 
 
    background:blue; 
 
    height:250px; 
 
    width:50%; 
 
    float:left; 
 
} 
 

 
#mydivRight { 
 
    background:yellow; 
 
    height:250px; 
 
    width:50%; 
 
    float:right; 
 
} 
 

 
@media only screen and (max-width:768px){ 
 
    #wrapper { 
 
     width:100%; 
 
    } 
 

 
    #mydivRight, #mydivLeft { 
 
     display:block; 
 
     float:none; 
 
     width:100%; 
 
    } 
 

 
}

<div id="wrapper"> 
 
    <div id="mydivRight"> 
 
    </div> 
 
    <div id="mydivLeft"> 
 
    </div> 
 
</div>

或者，更復雜的解決方案是使用Flexbox的，並使用order屬性或flex-direction: column-reverse;重新排序柔性的兒童。

#wrapper { 
 
    width: 1000px; 
 
    display: flex; 
 
} 
 

 
#wrapper > div { 
 
    width: 50%; 
 
    height: 250px; 
 
} 
 

 
#mydivLeft { 
 
    background: blue; 
 
} 
 

 
#mydivRight { 
 
    background: yellow; 
 
} 
 

 
@media only screen and (max-width:768px) { 
 
    #wrapper { 
 
    width: auto; 
 
    flex-direction: column-reverse; 
 
    } 
 
    #wrapper > div { 
 
    width: auto; 
 
    } 
 
}

<div id="wrapper"> 
 
    <div id="mydivLeft"> 
 
    </div> 
 
    <div id="mydivRight"> 
 
    </div> 
 
</div>

來源

2017-01-22 02:19:47

這工作得很好，但是在生產它似乎沒有要正常工作，因爲我仍然有左邊去的頂部和左側的底部 – Chris

@克里斯怪異，不肯定爲什麼......這是非常簡單的。對於它的價值，我更新了答案並添加了一個flexbox解決方案。 Flexbox可讓您通過CSS重新排列元素的順序，這非常酷。也許這將有助於？ –

我在另一個文件中發現了一些css，它看起來像這樣（我改變了div名稱以匹配我在這裏的那些）#mydivLeft，#mydivRight { float：left; 寬度：50％; padding：0 0 80px; } 而那被稱爲第一，不知道是會阻止或不？ – Chris

您可以使用order逆轉的元素是如何堆疊

#wrapper { 
 
    width: 1000px; 
 
    max-width: 100%; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    height: 250px; 
 
} 
 
#wrapper div { 
 
    flex: 1; 
 
} 
 
#mydivLeft { 
 
    background: blue; 
 
} 
 
#mydivRight { 
 
    background: yellow; 
 
} 
 
@media only screen and (max-width: 768px) { 
 
    #wrapper div { 
 
    flex: 0 100% 
 
    } 
 
    #mydivRight { 
 
    order: -1 
 
    } 
 
}

<body> 
 
    <div id="wrapper"> 
 
    <div id="mydivLeft"> 
 
    </div> 
 
    <div id="mydivRight"> 
 
    </div> 
 
    </div> 
 
</body>

來源

2017-01-22 02:21:12 dippas

不能只是改變顏色，因爲每個div都有元素。在我運行它之前，這是一個測試運行 – Chris

您可以使用Flexbox的佈局順序使用flexbox。默認情況下，flex-direction是row，在媒體查詢中將其更改爲column-reverse。

#wrapper { 
 
    max-width: 1000px; 
 
    display: flex; 
 
} 
 
#mydivLeft, #mydivRight { 
 
    flex: 1; 
 
    height: 250px; 
 
} 
 
#mydivLeft { 
 
    background: blue; 
 
} 
 
#mydivRight { 
 
    background: yellow; 
 
} 
 
@media only screen and (max-width: 768px) { 
 
    #wrapper { 
 
    flex-direction: column-reverse; 
 
    } 
 
}

<div id="wrapper"> 
 
    <div id="mydivLeft"></div> 
 
    <div id="mydivRight"></div> 
 
</div>

來源

2017-01-22 02:28:46 Stickers

Div的堆疊在彼此的頂部，只是沒有正確的順序

回答

相關問題