双飞翼布局-白红宇

双飞翼布局

阅读量：6677 次

发布时间：2019-06-25

本文共 1261 字，大约阅读时间需要 4 分钟。

主要是通过给padding-bottom一个较大的正值，margin-bottom一个大小一样的负值，外层容器overflow：hidden；实现登高布局，保证容器内高度大小跟随内容变化

CSS文件：

body{
      margin:0;     padding:0; } .header {
      background:orange;     height:100px; } .footer{
      background: greenyellow;     height:300px; } .article{
      background:beige;     overflow: hidden; } .article .middle{
      float:left;     background: #dbae58;     width:100%;     margin-bottom:-9999px;     padding-bottom:9999px; } .article .right{
      background: #213aff;     float: left;     width:100px;     margin-left: -100px;     margin-bottom:-9999px;     padding-bottom:9999px; } .article .left{
      background: green;     float:left;     width:150px;     margin-left: -100%;     margin-bottom:-9999px;     padding-bottom:9999px; } .article .inner{
      background: #50cd35;     margin-left:150px;     margin-right:100px;     margin-bottom:-9999px;     padding-bottom:9999px; }