5

我想要 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   |
    |       |
    ---------
4

4 回答 4

5

使用这样的东西...

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

于 2013-02-19T15:38:14.353 回答
3

这应该有效：

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;
    }
}
于 2013-02-19T15:42:02.963 回答
1

这段代码非常不完美，但它满足了您在元素布局方面的要求。

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

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

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

于 2013-02-19T15:57:49.967 回答
1

您需要使用媒体查询。

媒体查询由媒体类型和至少一个表达式组成，该表达式通过使用媒体特征（例如宽度、高度和颜色）来限制样式表的范围。在 CSS3 中添加的媒体查询让内容的呈现可以针对特定范围的输出设备进行定制，而无需更改内容本身。

媒体查询示例 

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

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

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

于 2013-02-19T15:26:22.253 回答