• home > webfront > style > css >

    多列等高布局的方法汇总,分别css2.1,css3实现

    Author:[email protected] Date:

    等高布局如何实现,传说中的两翼双飞布局是什么鬼?右边高度跟随内容高度如何实现?

    比如我的网站,如果要实现左右等高,或者多列等高布局,兼容ie8,如何做?

    如果用css3,实现,倒是比较简单,display:box; 就搞定。

    但是,是用css2

    周陆军的个人网站首页

    其实,这个还是比较简单的:

    代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>高度自适应布局</title>
    <style>
    body{ padding:0; margin:0; color:#f00;}
    .container{ margin:0 auto; width:600px; border:3px solid #00C;
        overflow:hidden; /*这个超出隐藏的声明在IE6里不写也是可以的*/
    }
    .left{ float:left; width:150px; background:#B0B0B0;
        padding-bottom:2000px;
        margin-bottom:-2000px;
    }
    .right{ float:left; width:450px; background:#6CC;
       padding-bottom:2000px;
       margin-bottom:-2000px;
    }
    </style>
    </head>
    <body>
    <div class="container">
        <div class="left">我是left</div>
        <div class="right">我是right<br><br><br>现在我的高度比left高,但left用它的padding-bottom补偿了这部分高度</div>
        <div style="clear:both"></div>
    </div>
    </body>
    </html>

    在进行具体操作的时候,padding-bottom的值大小取决于你的项目的实际情况,如果不确定,设大一点也无所谓。


    转载本站文章《多列等高布局的方法汇总,分别css2.1,css3实现》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/style/cssBase/2016_1222_7925.html