Div重新定位窗口大小

Question

我一直在努力實現這一目標，但我還沒有完全正常工作，所以在這里什么也沒做：

我有這個網站： 網站首頁

由以下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列的右側需要低於MID列的 左側 。 到目前為止，我的CSS文件非常簡單，這是窗口大小更改時我唯一需要做的主要事情。

在此先感謝您的幫助。

Answer 1

哦，很有趣，是玩CSS媒體查詢的借口！

演示： 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

試試這個演示

我猜您想獲得一個流暢/響應式的設計。 這應該為您工作。

使用float:left and min-width

Answer 3

是的，您將要使用媒體查詢。 這是其中的JSFiddle 。

來回調整Fiddle的顯示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寬度使用%值