2012-12-10两列DIV高度自适应方法汇总

    您现在的位置是:首页 > 学无止境 > 心得笔记

    网站优化(seo)中,提到过网站样式的优化,即在网站的布局设计中,采用DIV+CSS来布局。网站制站中,我们经常要把两个并排显示的div实现一样高的效果,即每列高度(事先并不能确定哪列的高度)的相同,有以下几种方法(方法来源来互联网):
    1、JS实现(判断2个div高);
    2、纯css方法;
    3、加背景图片实现。

    <!doctype html>

    <html>

    <head>

    <meta charset="gb2312">

    <title>DIV+CSS左右两列自适应高度的方法-HTMer</title>

    <style type="text/css">

    .main{500px;overflow:hidden;}

    .left{width:100px;background-color:#0CC;margin-bottom:-9999px;padding-bottom:9999px;float:left;}

    .right{width:400px;background-color:#F00;float:left;}

    </style>

    </head>

    <body>

    <div class="main">

        <div class="left">左侧内容1</div>

        <div class="right">右侧内容1<br />右侧内容2<br />右侧内容3</div>

    </div>

    </body>

    </html>

关键字词:两列,div,自适应,方法