等高布局实现的两种方式

等高布局实现的两种方式：

第一种方式：

（1）利用padding-bottom和margin-bottom相抵消

（2）利用paddig-bottom 撑开显示更多的背景；

margin-bottom的负值抵消padding的占位；

代码的实现如下：

<style>
        .box{
            width: 600px;
            min-height: 400px;
           overflow: hidden; 
        }
        .left,.center,.right{
            float: left;
            width: 200px;
            min-height:400px;
            padding-bottom: 1000px;
            margin-bottom: -1000px;
        }
        .left{
            background-color: yellowgreen;
        }

        .center{
            background-color: pink;
        }

        .right{
            background-color: orange;
        }
</style>

<div class="box">
        <div class="left"></div>
        <div class="center">今天的天气优点热们今天的天气优点热优点热们今天的天气优点热优点热们今天的天气优点热优点热们今天的天气优点热优点热们今天的天气优点热优点热们今天的天气优点热此从v优点热们今天的天气优点热优点热们今天的天气优点热优点热们今天的天气优点</div>
        <div class="right"></div>
</div>

此方法的优点是：

结构简单；

可以实现任意列的等高变化；

需要合理的控制margin-bottom和padding-bottom的占位；

第二种方式：

利用border默认和高度发生变化，因为利用的是border所以，只可以实现两列或者三列等高的布局；

代码如下：

<style>
        .box{
            width: 100px;
            border-left: 100px solid red;
            border-right: 100px solid orange;
            min-height: 100px;
            background-color: pink;
        }
        .left,.center,.right{
            float: left;
            width: 100px;
            min-height: 100px;
        }
        .left{
            margin-left: -100px;
        }
        .right{
            margin-right:-100px;
        }
</style>

<div class="box">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
</div>