在Safari和iPhone Chrome中使用靈活的列

Question

我正在嘗試創建一個移動響應模板。 我正在使用CSS媒體來查找瀏覽器寬度，並且在大多數情況下它工作正常。 但是我希望在一個設備上，左列會占用太多空間，使其跳到右邊的主要內容之下。

左下方的解決方案是使用柔性柱來反轉流量。 這適用於桌面上的Firefox，Google Chrome，Internet Explorer和Opera。 它不適用於iPhone上的Google Chrome，也不適用於桌面或iPhone上的Safari。 在這兩種情況下，左列都顯示在右列上方。 它適用於我朋友的Android。

這是html：Expand | Select | Wrap | Line Numbers

<div id="content">
    <div class="left">
        LEFT CONTENT
    </div>

    <div class="content">
        MAIN CONTENT
    </div>
</div>

在980像素及更大的屏幕上設置這些塊的值的CSS：展開|選擇|換行|行號

#content {
    clear: both;
    margin: 0 auto;
    width: 980px;
    display: inline-block;
    min-height: 600px;
}

.content {
    float: left;
    min-height: 500px;
    padding: 10px 10px 0 10px !important;
    width: 742px !important;
}

.left   {
    float: left;
    padding: 10px 2px 0 10px !important;
    width: 202px !important;
}

以正確的瀏覽器大小控制列的代碼是：展開|選擇|換行|行號

@media (max-width: 632px) {
   #content { width:603px; display: -webkit-flex; display:flex; -webkit-flex-direction:column-reverse; flex-direction:column-reverse; min-height: 0;}
   .content { width:583px !important; min-height: 0;}
   .left { width:583px !important;}
}

任何幫助將非常感激。

Answer 1

我用你的代碼在本地模擬。 它似乎在Safari上運行得很好（至少對Mac來說）。 這不是預期的行為嗎？ 你能提供圖片或更多細節嗎？

它直接與您的問題無關，但我想您最好使用百分比寬度而不是原始像素。 如果你不希望divs保存它們之間的距離，你應該使用margin-right （或left）。