<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>等高布局</title>
    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }

      .parent{
        width: 900px;
        border: 1px solid #0000FF;
        margin: 0 auto;
        /* 隐藏超出区域 */
        overflow: hidden;
      }
      .parent div{
        float: left;
        width: 300px;
      }
      .left{
        background-color: #006633;
        /* 正负相抵  不占位*/
        padding-bottom: 1000px;
        margin-bottom: -1000px;
      }
      .center{
        background-color: #008000;
        /* 正负相抵  不占位*/
        padding-bottom: 1000px;
        margin-bottom: -1000px;
      }
      .right{
        background-color: #00BCC2;
        /* 正负相抵  不占位*/
        padding-bottom: 1000px;
        margin-bottom: -1000px;
      }
    </style>
  </head>
  <!-- 
    方案1 子元素利用内外边距相抵消，父元素设置overflow:hidden
        合理控制margin和padding的值配合
        视觉效果  撑开

    方案2 利用边框模拟背景，实现等高列显示效果
   -->
  <body>
    <div class="parent clearfix">
      <div class="left">
        我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left我是left
      </div>
      <div class="center">
        我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center我是center
      </div>
      <div class="right">
        我是right我是right我是right我是right我是right我是right我是right我是right我是right我是right我是right我是right我是right我是right我是right我是right我是right我是right我是right我是right我是right我是right我是right我是right我是right我是right我是right我是right我是right我是right我是right我是right我是right我是right我是right
      </div>
    </div>
  </body>
</html>