【多列等高布局】三种方法，各取所需:

实现一个多列的等高布局，思路来自这个网站:http://www.jb51.net/css/68810.html

但是有的有些错误，我进行了修改，以下代码自己运行过没有问题。同时那篇文章的方法有的并不实用，我筛选了三个：（一）利用html+简单css+img图片实现（二）html+css（三）html+css+jQuery

（一）利用html+简单css+img图片实现

优点：相对简单

缺点：一旦改变背景，需要重新改变背景图片。

这是背景图片，已经设置好了三栏各自占全宽的百分比，颜色。一旦要改变就要改图片。

<style type="text/css" >
    .container{
        background:url("../picture/cols.gif") repeat-y;/*图片也在这个文件中找http://www.jb51.net/css/68810.html*/
        width: 960px;
        margin: 0 auto;
        overflow: hidden;/*消除盒子塌陷的问题*/
        background-size: 100%;/*拉伸背景大小*/
    }

    .container:after{
        clear: both;
    }
    .left{
        width: 220px;
        float: left;
    }
    .content{
        width: 520px;
        float: left;
    }
    .right{
        width: 220px;
        float: left;
    }
style>

 

 

<div class="container">
    <div class="left">此处添加大量文字div>
    <div class="content">此处添加大量文字div>
    <div class="right">此处添加大量文字div>
div>

（二）html+css

优点：兼容性强

缺点：理解起来稍困难

<div class="container">
    <div class="rightWrap">
        <div class="contentWrap">
            <div class="leftWrap">
                <div id="left">此处输入左列（可输入更多文字来调试一下）div>
                <div id="content">此处输入中列div>
                <div id="right">此处输入右列div>
            div>
        div>
    div>
div>

 

<style type="text/css" >
   /*对于不明白的样式一定要取消一下试试，就会发现它解决了什么问题*/
    .container{
        width: 960px;
        margin: 0 auto;
        overflow: hidden;/*对于超出被部分隐藏，如果没有你会发现红色的左栏变宽了*/
    }
    .rightWrap{
        width: 100%;
        position: relative;
        background-color: blue;/*右列颜色*/
        float: left;/*防止盒子塌陷的方法*/
    }
    .contentWrap{
        width: 100%;
        position: relative;
        right: 220px;/*右列宽度*/
        background-color: green;
        float: left;/*防止盒子塌陷的方法*/
    }
    .leftWrap{
        width: 100%;
        position: relative;
        right: 520px;/*中列宽度*/
        background-color: red;
        float: left;/*防止盒子塌陷的方法*/
    }
    /*左列宽度960-220-520*/
    #left{
        width: 220px;
        position: relative;
        left: 740px;
        float: left;/*让left,content,right在同一行上*/
    }
    #content{
        width: 520px;
        position: relative;
        left: 740px;
        float: left;/*让left,content,right在同一行上*/
    }
    #right{
        width: 220px;
        position: relative;
        left: 740px;
        float: left;/*让left,content,right在同一行上*/
    }
style>

面对流式布局可将width的px改成%，具体参考：http://www.jb51.net/css/68810.html

中第三个方法

（三）html+css+jquery

<div class="container">
    <div class="left">这里边有很多的内容这里边有很多的内容这里边有很多的内容这里边有很多的内容这里边有很多的内容这里边有很多的内容这里边有很多的内容这里边有很多的内容div>
    <div class="content">这里边有很多的内容div>
    <div class="right">这里边有很多的内容div>
div>

 

<style>
    .container{
        width: 960px;
        margin: 0 auto;
        overflow: hidden;/*防止盒子塌陷的方法*/
    }
    .left{
        width: 220px;
        background-color: red;
        float: left;
    }
    .content{
        width: 520px;
        background-color: green;
        float: left;
    }
    .right{
        width: 220px;
        background-color: blue;
        float: left;
    }
style>

 

<script src="../jquery.js">script>
<script>
    function modifyHeight(elements) {
        var tallest=0;
        for(var i=0;ilength;i++){
            if(tallesteq(i).height()){
                tallest=elements.eq(i).height()//注意这里用eq（）是jquery方法，调用后仍然得到一个jquery对象，此时可以使用jquery的height（）方法。如果用elements[i]则不是jquery对象，不能用height（）方法得到高。
            }
        }
        elements.height(tallest);
    }
    var $divArr=$(".container>div")
    modifyHeight($divArr);
script>