jquery - 如图所示动态排列div

Question

我需要先在一个容器中安排所有 3 个 div。 根据浏览器的大小，显示保持 div=leftCol 和 div midCol 相同的内联位置，div=rightCol 应该自动排列在 div=leftCol 之后。

在这种情况下，div=midCol 应该可以垂直调整大小。

页脚应该显示在 div=container 之后

应该怎么做呢？我越来越糊涂了。

这是 HTML 代码。

> <div id="container">
 <div id="wrapper">

    <div id="leftCol">
    </div>  

    <div id="midCol"
    </div>

    <div id="rightCol"
    </div>
 </div>
</div>
            <!--FOOTER -->
    <div id="footer"> 
    <h1> NEWS © All Rights Reserved</h1>
</div>

这是 CSS 代码。

<style type="text/css"> 
html {
    height: 100%;   
    margin: 0;
    padding: 0;
}
body {
    height: 100%;   
    margin: 0;
    padding: 0;
}

    #container {
        width:40%;
        min-height:600px;
        margin: 0 auto;
        background-color:#424040;
    }



    #leftCol {
        width: 120px;
        background-color: #FFC600;
        min-height: 250px;
        float: left;
        display:inline;
        margin:0;
        padding:0;
    }

    #midCol {
        width: 20%;
        background-color: #C0FF00;
        min-height: 250px;
        float: left;
        display:inline;
        margin:0;
        padding:0;
    }

    #rightCol {
        width: 120px;
        background-color: #FF0057;
        min-height: 250px;
        margin:0;
        padding:0;  
    }



    #footer {
    height: 15px;
    background-color: #E0065A;
    color: #FFFFFF;
    text-align: center;
    font-size: 35%;
    bottom: 0;
    width: 100%;
    }
</style>

这段代码有什么问题？ 为什么页脚没有出现在容器的末尾？ 容器div中的leftCol、midCol、rightCol如何排列？

当浏览器重新调整大小时...如何将rightCol 排列在leftCol 下方？ 最后如何调整 midCol 的大小，使其始终与 news.htm 一样高？

你可以看看我做的图片。 http://postimg.org/image/l8enq2x27/

顺便说一句，中间的 div 应该有一个滑动垂直事件。

非常感谢您的支持!!! ³

Answer 1

fiddle

<div id="container">
    <div id="wrapper">
        <div id="leftCol"></div>
        <div id="midCol"></div>
        <div id="rightCol" </div></div>
    </div>
    <!--FOOTER -->
    <div id="footer">
         <h1> NEWS © All Rights Reserved</h1>

    </div>

我希望你正在寻找这个。但是如果你想获得完整的结果，你必须在你希望它的大小为 100% 的中间 block 上编写媒体查询，并且使用 bootstrap 会更好。