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？

当浏览器重新调整大小时......如何在leftCol下面安排rightCol？最后如何重新调整midCol的大小，以便始终作为news.htm的高点？

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

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

THNX非常适合您的支持！ ³

Answer 1

查看 css媒体查询，这可能是您想要的（谷歌搜索更多信息）

以下链接提供了一些信息：http://css-tricks.com/css-media-queries/

另一种选择是创建一个动态添加和删除类的js onresize函数：

调整大小 javascript 链接（onresize）：http://www.w3schools.com/jsref/event_onresize.asp
调整大小 jquery 链接（resize()）：http://api.jquery.com/resize/
添加课程 javascript 链接（.className）： Add another class to a div with javascript
添加类 jquery 链接（addClass()）： http://api.jquery.com/addclass/

您添加的课程将存在于您的css文件中

Answer 2

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>

我希望你能找到这个。但是如果你想获得完整的结果，你必须在mid块上写下媒体查询，你想要它的大小是100％，使用bootstrap更好。

像图片中一样动态排列div

2 个答案: