6

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

4

2 回答 2

3

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

在您的 html 中，div像这样放置您的（之前的右侧）：

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

用于显示这些的 cssdiv应如下所示：

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

最后，为了div在右边显示你的左边，你应该在你的 css 中添加如下内容：

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

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

于 2013-09-20T02:27:24.443 回答
2

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

于 2013-09-20T02:43:04.473 回答