左浮动div位于另一个div下方

Question

我有两个div，而（div 1）向左浮动而（div 2）向右浮动。我正在创建一个响应式布局，当视口更改时，（div 1）将在（div 2）下面。我通过MS Paint创建了一个简单的图像，以便于说明和一些代码。此外，两者都包含动态内容，因此不得修复其高度。

没有javascript（如果可能的话）只是简单的CSS。我只知道如何将div 2置于div 1之下，而不是相反。

有谁知道我怎么能做到这一点？

HTML：

 <div id="div1 sidebar" style="float: left;">
   //dynamic content
 </div>

 <div id="div2 content" style="float: right;">
  //dynamic content
 </div>

HTML是自动生成的，所以在标记中，div1最初是以div2为先。不建议更改顺序（将div2放在div1之上），因为许多页面使用相同的布局。请参阅上面的代码

Answer 1

有我的主张。使用媒体查询，找到您希望div并排放置的最大宽度。

在你的html中，将div放在这样的位置（之前是正确的）：

<div class="div2">
    div 2
</div>
<div class="div1">
    div 1
</div>

用于显示div的css应如下所示：

.div1 {
    float: left;
    width: 25%; 
}
.div2 {
    float: right;
    width: 75%;
}

最后，要在右侧下方显示左侧div，您应该添加以下内容：

@media all and (max-width: 480px) {
    .div1, .div2 { 
        float: none;
        display: block; 
    }
}

Here是一个证明这种编码的jsfiddle。您只需调整浏览器大小即可看到左侧div正好位于右侧。

Answer 2

当视口大小调整到您希望发生更改的位置时，我会使用媒体查询来更改应用于每个div的CSS样式。然后将div 1向右浮动，向左浮动div 2并给div 2一个足够大的右边距，将div 1向下推到下一行。