三列（多列）等高布局

网页局部布局中，常常出现多列登高布局，因为内容高度不定，所以不能对每一列设置相等的高度。

一、常用方法，亦是《高级web标准解决方案》一书中采用的办法：采用对没列元素添加较大的正底内边距（padding-bottom）与 等大负值的底外边距(margin-bottom) 

代码结构如下

<div id="container" >
        <div class="box" >
            <p>We created lists of words that begin with ffxdz. All letters were compared to our large Scrabble and Words With Friends database. Every word contained in this list can be played in Scrabble.We created lists of words that begin with ffxdz. All letters were compared to our large Scrabble and Words With Friends database. Every word contained in this list can be played in Scrabble.We created lists of words that begin with ffxdz. All letters were compared to our large Scrabble and Words With Friends database. Every word contained in this list can be played in Scrabble.We created lists of words that begin with ffxdz. All letters were compared to our large Scrabble and Words With Friends database. Every word contained in this list can be played in Scrabble.</p>
        </div>
        <div class="box" >
            <p>We created lists of words that begin with ffxdz. All letters were compared to our large Scrabble and Words With Friends database. Every word contained in this list can be played in Scrabble.We created lists of words that begin with ffxdz. All letters were compared to our large Scrabble and Words With Friends database. Every word contained in this list can be played in Scrabble.</p>
        </div>
        <div class="box" >
            <p>We created lists of words that begin with ffxdz. All letters were compared to our large Scrabble and Words With Friends database. Every word contained in this list can be played in Scrabble.</p>
        </div>
    </div>

css code

body, div,p{ margin: 0; padding: 0;}
#container{ text-align:center;}
#container {
    width: 960px;
　　margin: 20px auto 0;
    overflow: hidden;
}
#container *{ text-align: left;}
.box {
    background: #ccc;
    float: left;
    display: inline;
    width: 258px;
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 20px;
    margin-right: 30px;
    margin-bottom: -99999px;
    padding-bottom: 99999px;
    border: 1px solid red;
}
.box:last-child{
    margin-right: 0;
}

　　

　　此方法没有兼容性问题，列数可自由定制，可以在包括ie6在内的浏览器都可正常展现，但有一个问题，底边框缺失，如图

解决办法，在每一个box的结构中添加一个空的div，用来展现底边

代码结构

<div id="container" >
        <div class="box" >
            <p>We created lists of words that begin with ffxdz. All letters were compared to our large Scrabble and Words With Friends database. Every word contained in this list can be played in Scrabble.We created lists of words that begin with ffxdz. All letters were compared to our large Scrabble and Words With Friends database. Every word contained in this list can be played in Scrabble.We created lists of words that begin with ffxdz. All letters were compared to our large Scrabble and Words With Friends database. Every word contained in this list can be played in Scrabble.We created lists of words that begin with ffxdz. All letters were compared to our large Scrabble and Words With Friends database. Every word contained in this list can be played in Scrabble.</p>
            <div class="bottom"></div>
        </div>
        <div class="box" >
            <p>We created lists of words that begin with ffxdz. All letters were compared to our large Scrabble and Words With Friends database. Every word contained in this list can be played in Scrabble.We created lists of words that begin with ffxdz. All letters were compared to our large Scrabble and Words With Friends database. Every word contained in this list can be played in Scrabble.</p>
            <div class="bottom"></div>
        </div>
        <div class="box" >
            <p>We created lists of words that begin with ffxdz. All letters were compared to our large Scrabble and Words With Friends database. Every word contained in this list can be played in Scrabble.</p>
            <div class="bottom"></div>
        </div>
    </div>

　　css code

body, div,p{ margin: 0; padding: 0;}
#container{text-align:center;}
        #container {
            width: 960px;
            margin:20px auto 0;
            overflow: hidden;
        }
        #container *{
            text-align: left;
        }
        #container{
            position: relative; /**添加地边框需已容器元素绝对定位**/
            zoom: 1; /** ie6 下部分情况margin无效，解决办法是给用到margin的元素的父元素添加 zoom=1 的样式**/
        }
        .box {
            background: #ccc;
            float: left;
            display: inline;
            width: 258px;
            padding-top: 20px;
            padding-right: 20px;
            padding-left: 20px;
            margin-right: 30px;
            margin-bottom: -99999px;
            padding-bottom: 99999px;
            border: 1px solid red;
        }
        .box:last-child{
            margin-right: 0;
        }
        .bottom{
            height: 1px;
            position: absolute;
            bottom: 0;
            width: 300px;
            background: red;
        }
        .first{
            left: 0;
        }
        .second{
            left: 330px;
        }
        .last{
            left: 660px;
        }

　　如此便得到带有正常边框的登高三列布局

 

转载于:https://www.cnblogs.com/qingranEvent/p/6588773.html