3 div根据屏幕大小更改位置

Question

我想通常在页面中显示3个div,如下所示

--------------
|     |      |
|  1  |      |
|     |   2  |
|-----|      |
|     |      |
|  3  |      |
|     |      |
--------------

所以HTML会是这样的

编辑:我认为有一个更好的解决方案,但要保持左边的1和3一个接一个你可能做的第一件事是将它们放在另一个div.

我相信这样做是不可能通过仅使用媒体查询来解决调整大小.

有没有办法在没有外部容器div的情况下实现相同的视觉效果？

<section class="content-wrapper main-content clear-fix">
                <div>
                    <div id="1" class="main-content-left float-left">
                        @RenderSection("leftBefore", required: false)
                    </div>
                    <div id="3" class="main-content-left-after float-left">
                        @RenderSection("leftAfter", required: false)
                    </div>
                </div>
                <div id="2" class="main-content-center float-left">
                    @RenderBody()
                </div>

            </section>

我的目标是让左侧菜单具有固定宽度,右侧则使用剩余空间.如果屏幕尺寸减小,则div应该移动以便具有类似下面的内容,可能全部居中.

有什么建议？

    ---------
    |       |
    |   1   |
    |       |
    |-------|
    |       |
    |   2   |
    |       |
    |-------|
    |       |
    |   3   |
    |       |
    ---------

Answer 1

使用这样的东西......

HTML

<div class="wrap">
    <div class="right top"></div>
    <div class="left"></div>
    <div class="right bot"></div>
</div>

CSS

.wrap {width: 85%; margin: auto; overflow: hidden;}
.left {float: right; height: 510px; width: 49%; background: pink;}
.right {float: left; height: 250px; margin-bottom: 10px; width: 49%;}
.right.top {background: green;}
.right.bot {background: red;}
@media all and (max-width: 400px) {
    .left, .right {float: none; margin-bottom: 5px; height: 200px;}
}

截图

以上 600px

下面 600px

在这里演示: jsBin

Answer 2

这应该有效：

HTML：

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

CSS：

div {
    height: 200px;
    width: 100%;
}
@media screen and (min-width:500px) {
    #div1, #div3 {
        width: 50%;
        float: left;
        clear: left;
    }
    #div2 {
        width: 50%;
        float: right;
        height: 400px;
    }
}