自适应两栏布局&&多列等高布局

一、自适应两栏布局

实现左边div元素固定，右边div自适应

两个块级元素

（1）将固定元素设为浮动，此时另一个元素的部分宽度会被浮动元素覆盖，设置另一元素的margin-left或BFC

.par{
    width: 300px;
    border: solid 1px #0000FF;
    height: 60px;
    }
.lnav{
    width: 70px;
    height: 30px;
    background: #008000;
    float: left;
       }
.rnav{
    height: 40px;
    background: #EE2C2C;
    margin-left: 70px;
    }

            

（2）flex布局

.par{
    width: 300px;
    border: solid 1px #0000FF;
    height: 60px;
    display: flex;
    }
.lnav{
    width: 70px;
    height: 30px;
    background: #008000;
    }
.rnav{
    height: 40px;
    background: #EE2C2C;
    flex-grow: 1;
    }

（3）绝对布局（和float类似）

.par{
    width: 300px;
    border: solid 1px #0000FF;
    height: 60px;
    position: relative;
}
.lnav{
    width: 70px;
    height: 30px;
    background: #008000;
    position: absolute;
    left: 0;
    top: 0;
}
.rnav{
    height: 40px;
    background: #EE2C2C;
    margin-left: 70px;
}

（4）display:table

.par{
    width: 300px;
    border: solid 1px #0000FF;
    height: 60px;
    display: table;
    }
.lnav{
    width: 70px;    
    background: #008000;
    display: table-cell;
    }
.rnav{
    background: #EE2C2C;
    display: table-cell;
    }

（5）双float+calc()计算属性

.par{
    width: 300px;
    border: solid 1px #0000FF;
    height: 60px;
    overflow: hidden;
    }
.lnav{
    float: left;
    width: 70px;    
    height: 30px;
    background: #008000;
    }
.rnav{
    float: left;
    width: calc(100% - 70px);// 减号左右留空格
    height: 40px;
    background: #EE2C2C;
    }

两个行内元素

如：css 实现一个自适应搜索框，输入框部分宽度自适应，搜索按钮宽度固定   （行内元素）

（1）flex布局（与上面相同）

（2）float+calc()+box-sizing

.par{
    width: 300px;
    border: solid 1px #0000FF;
    height: 60px;
    overflow: hidden;
}
.lnav{
    float: left;
    width: 70px;    
    height: 30px;
    background: #008000;
    box-sizing: border-box;
}
.rnav{
    float: right;
    width: calc(100% - 70px);
    height: 40px;
    background: #EE2C2C;
    box-sizing: border-box;
}

 

二、多列等高布局

 效果图：

 （1）flex布局

.container{
    display: flex;
}
.left,.right,.center{
    flex-grow: 1;
}
.left{
    background: #0000FF;
}
.right{
    background: #00BFFF;
}
.center{
    background: #9ACD32;
}

<div class='container'>
    <div class='left'>多列等高布局左<br/>多列等高布局左</div>
    <div class='center'>多列等高布局中</div>
    <div class='right'>多列等高布局右</div>
</div>   

//缺点：IE9及以下版本不支持flex属性 //优点：实现方便，还可以实现各种比例

 

（2）利用border实现

.wrapper{
    display: inline-block;
    width: 200px;
    border-left: 200px solid #00BFFF;/*相当于设置left1的背景*/
    background: #808080;
    border-right: 200px solid #FFFF00;/*相当于设置right1的背景*/
}
.left1{
    float: left;
    width: 200px;
    margin-left: -200px;
    padding: 20px;
}
.center1{
    float: left;
    padding: 20px;
}
.right1{
    float:right;
    padding: 20px;
    margin-right: -200px;
}

<div class='wrapper'>
    <div class='left1'>多列等高布局左</div>
    <div class='center1'>
        多列等高布局中<br/>多列等高布局中<br/>多列等高布局中
    </div>
    <div class="right1">
        多列等高布局右<br/>多列等高布局右
    </div>
</div>
//这种方法只能最多只能实现三列等高，兼容IE8+

 

（3）利用margin和padding对冲实现  注意父元素设置“overflow:hidden”

#wrapper2 {
     overflow: hidden;
}        
.column2 {
     float: left;
     width: 200px;
     margin-bottom: -99999px;
     padding-bottom: 99999px;
}
.left2 {
    background: #6ee0b6;
}
.center2 {
     background: #f3777b;
}
.right2 {
     background: #c3c3ff;
}

<div id="wrapper2">
    <div class="column2 left2">
           <p>Sidebar</p>
    </div>
        <div class="column2 center2">
          <p>Main content；content；content；content；content</p>
        </div>
        <div class="column2 right2">
           <p>Sidebar</p>
    </div>
</div>

 优点：兼容所有浏览器