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

Question

我正在尝试创建移动响应式模板。我使用CSS媒体来查找浏览器宽度，并且在大多数情况下它工作正常。 但是我想在一个设备上，左栏会占用太多空间，使其跳到右边的主要内容之下。

左下方的解决方案是使用灵活的列来反转流量。 这适用于桌面上的Firefox，Google Chrome，Internet Explorer和Opera。 它不适用于iPhone上的Chrome浏览器，也不适用于桌面或iPhone上的Safari。在这两种情况下，左列都显示在右列上方。 它适用于我朋友的Android。

这是html： 展开|选择|换行|行号

<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（或左侧）。