3 divs changing location based on screen size

问题

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

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

so html will be something like

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.

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?

<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.

Any advice?

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

回答1:

This should work:

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

回答2:

Use something like this...

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

Screenshots

Above 600px

Below 600px

Demo here: 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.

example of a media query

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

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

demo: 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)

<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.

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

来源：https://stackoverflow.com/questions/14960133/3-divs-changing-location-based-on-screen-size

标签

html

css