左浮动 div 位于另一个 div 下方 [重复]答案

【问题标题】：Left-floated div place below another div [duplicate]左浮动 div 位于另一个 div 下方 [重复]
【发布时间】：2013-09-25 07:05:29
【问题描述】：

我有两个 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 上方），因为许多页面使用相同的布局。见上面的代码

【问题讨论】：

将float:left 放在两者上，然后将 div2 移到 div1 上方 :) 我怀疑如果不将 div2 向上移动，这是可能的
等等，所以你想让布局中语义上排在第一位的东西在视觉上排在第二位？
@Doorknob 嗯。在这种情况下，我如何将 div 2 放在首位？ :) 重要的是 div1 必须始终位于下方
请看这里：stackoverflow.com/questions/9485493/…
@Elmer 哪个
是侧边栏？由于左右浮动不会受你的HTML中的顺序影响，你可以简单的把 HTML放在前面（反之亦然）就可以达到想要的效果

标签： css html

【解决方案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，您应该在 css 中添加如下内容：

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

Here 是一个演示此编码的 jsfiddle。您只需调整浏览器的大小，即可看到左侧的div 位于右侧下方。

【讨论】：

HTML 不得重新排列 :( 其他页面使用相同的顺序。在 HTML 中 Div1 必须始终位于 Div2 之前。不得更改 HTML 顺序。只有 CSS。
即使html被重新排列并且div2写在div1之前，div1总是在div2的左边。请参阅 jsfiddle。

【解决方案2】：

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

【讨论】：