Question

我一直在努力实现这个目标几个小时而且我还没有完全实现它，所以这里什么都没有：

我有这个网站：Site HomePage

由此HTML元素组成：

    <div id="headerwrap">
        <div id="header">
        </div>
    </div>

    <div id="navigationwrap">
        <div id="navigation">
        </div>
    </div>

    <div id="midcontentwrap">
        <div id="leftwrap">
            <div id="left">

            </div>
        </div>

        <div id="midwrap">
            <div id="midleft">

            </div>
            <div id="midright">

            </div>
        </div>

        <div id="rightwrap">
            <div id="right">

            </div>
        </div>

    </div>
</div>

我需要的是： - 调整浏览器窗口大小时，左和右列保持原状， MID COLUMN RIGHT SIDE 需要低于 MID COLUMN LEFT SIDE 。我的CSS文件现在非常简单，这是我在窗口大小改变时唯一需要做的事情。

提前感谢您的帮助。

Answer 1

哦，好玩，借口 CSS Media Queries 的借口！

DEMO：http://jsfiddle.net/Vn2QY/1/

CSS

#midcontentwrap {
    min-width: 500px;
}

#leftwrap, #midwrap, #rightwrap {
    float: left;
    min-height: 400px;
}

#leftwrap, #rightwrap {
    min-width: 100px;
    width: 25%;
    background-color: #15a;
}

#midwrap {
    width: 50%;
    background-color: #45a
}

#midleft, #midright {
    width: 50%;
    float: left;
}

#midleft {
    background-color: #a45;
}
#midright {
    background-color: #4a5;
}

@media all and (max-width: 500px) {
    #midleft, #midright {
        width: 100%;
    }
}

这里的关键部分是CSS的最后一部分。它基本上表示“对于所有媒体（屏幕，打印等），当浏览器宽度小于500像素的宽度时，更改#midleft和#midright的样式并使它们100％可用宽度“。

通过增加宽度，现有的float样式将强制它们进入新行。

Answer 2

Try this DEMO

我猜你想要获得流畅/响应式设计。这应该适合你。

使用float:left and min-width

Answer 3

是的，您将要使用媒体查询。这是它的JSFiddle。

调整小提琴的显示iFrame来回调整宽度超过500px以查看结果。我也对你的HTML进行了一些改进，使其更加现代化（对不起）：

HTML：

<section class='contentWrap'>
    <aside>
        This element corresponds to the element on the far left of the image you linked to.
    </aside>

    <div class='mainContent'>
        <article class='left'>
            This element corresponds to the mid-left element in the image you linked to.
        </article>
        <article class='right'>
            This element corresponds to the mid-right element in the image you linked to.
        </article>
    </div>

    <nav>
        This element corresponds to the element on the far right side of the image you   linked to.
    </nav>

</section>

CSS：

.contentWrap {
    width: 100%;
}

.contentWrap aside {
    display: inline-block;
    width: 25%;
    height: 200px;
    border: 1px solid purple;
}

.mainContent {
    display: inline-block;
    width: 45%; /* only because the borders are upsetting the percantages */
    height: 200px;
    border: 1px solid gray;
    vertical-align: top;
}

.mainContent article {
    border: 1px solid #00cae9;
    margin-bottom: 2px;
}

.contentWrap nav {
    display: inline-block;
    width: 25%;
    height: 200px;
    border: 1px solid orangered;
    vertical-align: top;
}

@media screen and (min-width: 500px) {
    .contentWrap {
        width: 500px;
        margin: 0 auto;
    }

    .mainContent article {
        display: inline-block;
        width: 47%;
        vertical-align: top;
    }
}

注意：如果您在超小屏幕上观看它，它将无法正常工作;那是JSFiddle的问题。

Answer 4

要解决此问题....请为所有%宽度
使用div id值

Div重新定位窗口调整大小

4 个答案:

CSS