html - 调整窗口大小时重新定位 Div

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 需要低于>中列左侧。我的 CSS 文件现在非常简单，这是随着窗口大小的变化我唯一需要做的主要事情。

在此先感谢您的帮助。

Answer 1

是的，您将要使用媒体查询。这是一个 JSFiddle它在行动。

将 Fiddle 的显示 iFrame 来回调整超过 500 像素宽度以查看结果。我也稍微修饰了您的 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 的问题。