等高布局 圣杯布局 双飞翼布局

等高布局

假等高

通过设置padding 与margin值相抵消来达到等高 注意：父元素一定要设置溢出隐藏 overflow：hidden；
父元素靠内容撑开 所以他的高等于最高的子元素的高

father{
			
			overflow:hidden;
}
div{
		float:left;
		padding-bottom:9999px;
		margin-bottom:-9999px;
}

真等高

根据内容撑开父盒子的原理，通过嵌套达到等高的效果。有几列就嵌套几个盒子。
HTML结构如下：

<div class="wrap">
        <div class="a">
            <div class="b">
                <div class="c">
                    <div class="col1"></div>
                    <div class="col2"></div>
                    <div class="col3"></div>
                    <div style="clear: both"></div>
                </div>
            </div>
        </div>
    </div>

样式：

<style>
        .wrap{
            width: 1200px;
            overflow: hidden;
        }
        .a {
            width: 100%;
            background-color: blueviolet;
        }

        .b {
            width: 100%;
            background-color: green;
            margin-left: -600px;

        }

        .c {
            width: 100%;
            background-color: red;  
            margin-left: -400px;
        }

        .col1 {
            float: left;
            width: 200px;
            height: 400px;
            background-color: red;
            position: relative;
            left: 1000px;
            
        }

        .col2 {
            float: left;
            width: 400px;
            height: 500px;
            background-color: green;
            position: relative;
            left: 1000px;
        }

        .col3 {
            float: left;
            width: 600px;
            height: 600px;
            background-color: blueviolet;
            position: relative;
            left: 1000px;
        }
    </style>

圣杯布局

<div class="c">
          <!-- 100% -->
          <div class="center">中间盒子</div>
      
        <!-- 固定宽度 -->
        <div class="left">左列</div>
     
      
        <div class="right">右列</div>

        <div style="clear:both"></div>
    </div>

  .c {
        /* width: 100%;不能设置100%  会溢出！！！！！！！！！！！！！！！！ */
      
        /* 可以300px 不能小于 保持300px */
        min-height: 300px;
        height: auto;
        padding: 0px 200px;
    }
    .left,.right {
        width: 200px;
        height: 300px;
        
    }
    .left {
        background-color: aqua;
        float: left;
        margin-left: -100%;

        position: relative;
        left:-200px;
    }
    .right {
        background-color: darkred;
        float: left;
        margin-left: -200px;
        position: relative;
        right: -200px;
    }
    .center {
        width: 100%;
        height: 300px;
        background-color: yellowgreen;
        float: left;
    }

双飞翼布局

        <div class="inner"> 中间盒子</div>
          
       
    </div>
  
    <!-- 固定宽度 -->
    <div class="left">左列</div>
 
  
    <div class="right">右列</div>

    <div style="clear:both"></div>
</div>

 .c {
      
        /* 可以300px 不能小于 保持300px */
        min-height: 300px;
        height: auto;
     
    }
    .left,.right {
        width: 200px;
        height: 300px;
        
    }
    .left {
        background-color: aqua;
        float: left;
        margin-left: -100%;
      
    }
    .right {
        background-color: darkred;
        float: left;
        margin-left: -200px;
       
    }
    .center {
        width: 100%;
        height: 300px;
        background-color: yellowgreen;
        float: left;
    }
    .inner {
        margin: 0px 200px;
    }