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

最新推荐文章于 2021-04-16 15:19:05 发布

relaxingwind

最新推荐文章于 2021-04-16 15:19:05 发布

阅读量755

点赞数

分类专栏： css html jQuery 文章标签：等到多列布局

css 同时被 3 个专栏收录

3 篇文章

订阅专栏

html

3 篇文章

订阅专栏

jQuery

2 篇文章

订阅专栏

本文介绍三种实现等高多列布局的方法：使用背景图片配合简单CSS、纯HTML+CSS技巧及结合jQuery的动态调整方案。每种方法都有其优缺点，并提供了具体的代码示例。

实现一个多列的等高布局，思路来自这个网站: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;i<elements.length;i++){
            if(tallest<elements.eq(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>