根据屏幕大小改变位置

I would like to have 3 divs that normally are shown in the page like below

我想要三个divs通常显示在页面如下

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

so html will be something like

html会是这样的

EDIT: I do think there is a better solution but to keep 1 and 3 on the left one after the other first thing you may do is placing them inside another div.

编辑:我确实认为有更好的解决方案，但是把1和3放在左边，然后你要做的第一件事就是把它们放在另一个div中。

I do believe that doing so it will be impossible to solve the resize by the use of media queries only.

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

Is there a way to achieve the same visual result without the external container 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>

My goal is to have the left menu with a fixed width and the right are that uses the remaining space. If screen-size is reduced the divs should move in order to have something like below, possibly all centered.

我的目标是让左菜单具有固定的宽度，而右菜单则使用剩余的空间。如果屏幕尺寸减小，divs应该移动到如下的位置，可能都是居中的。

Any advice?

任何建议吗?

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

4 个解决方案

#1

This should work:

这应该工作:

HTML:

HTML:

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

CSS:

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;
    }
}

#2

Use something like this...

使用这样的…

HTML

HTML

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

CSS

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;}
}

Screenshots

截图

Above 600px

超过600像素

Below 600px

低于600像素

Demo here: jsBin

演示:jsBin

#3

You need to use media queries.

您需要使用媒体查询。

A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Added in CSS3, media queries let the presentation of content be tailored to a specific range of output devices without having to change the content itself.

媒体查询由媒体类型和至少一个表达式组成，这些表达式通过使用媒体特性(如宽度、高度和颜色)来限制样式表的范围。在CSS3中添加了媒体查询，让内容的呈现适合于特定的输出设备，而不必改变内容本身。

example of a media query

媒体查询的例子

@media all and (max-width: 500px) {
    /* css */
}

this media query will execute when the screen is smaller than 500px;

该媒体查询将在屏幕小于500px时执行;

demo: http://jsfiddle.net/B2cKy/

演示:http://jsfiddle.net/B2cKy/

#4

This code is highly imperfect, but it meets your requirements in terms of how the elements should be laid out.

这段代码非常不完美，但是在元素应该如何布局方面，它符合您的要求。

http://jsfiddle.net/4uxTy/ (prefixes not included)

http://jsfiddle.net/4uxTy/(前缀不包括)

<section class="container">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
</section>

body, html {
    height: 100%;
}

.container {
    display: flex;
    flex-flow: column wrap;
    height: 100%;
}

.a, .b {
    flex: 1 0 50%;
}

.c {
    flex: 2 0 50%;
}

@media (max-width: 20em) {
    .a, .b, .c {
        flex: 1 1 auto;
    }

    .b {
        order: 1;
    }
}

This is probably as close as you're going to be able to get to what you want without modifying your markup or compromising your design. Flexbox does not have very widespread support at the moment, due to the fact that IE10 is the first IE to support it.

在不修改标记或影响设计的情况下，这很可能是您能够得到所需的。Flexbox目前还没有得到广泛的支持，因为IE10是第一个支持它的IE。

http://caniuse.com/#search=flexbox

http://caniuse.com/搜索= flexbox