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

Answer 3

您需要使用媒体查询。

媒体查询由媒体类型和至少一个表达式组成通过使用媒体功能限制样式表的范围，例如宽度，高度和颜色。在CSS3中添加了媒体查询内容的呈现可以根据特定的输出范围进行调整设备无需自行更改内容。

媒体查询示例

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

当屏幕小于500px时，将执行此媒体查询;

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

Answer 4

此代码非常不完美，但它在元素的布局方面符合您的要求。

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

这可能就像您能够在不修改标记或破坏设计的情况下获得所需内容一样接近。由于IE10是第一个支持它的IE，因此Flexbox目前没有得到非常广泛的支持。

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

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

4 个答案: