前端开发-常见CSS布局

css布局.jpg

常见的两列布局

float浮动布局

<div class="float-container">  
    <div class="float-left">左边</div>  
    <div class="float-right">左边div宽固定</div>  
</div>
.float-container{ width:100%;height:100px;}  
.float-container .float-left{float:left;width:100px;height:100%;background: #1ABC9C;}  
.float-container .float-right{height:100%;margin-left:100px;background: #FD482C;}  

flex布局

<div class="flex-container">  
    <div class="flex-left">左边</div>  
    <div class="flex-right">左边div宽固定</div>  
</div> 
.flex-container{ width:100%;height:100px;display:flex;display: -webkit-flex; }  
.flex-container .flex-left{width:100px;height:100px;flex:none;background: #1ABC9C;}  
.flex-container .flex-right{height:100px;background: #FD482C;flex:1;white-space:nowrap; }  

常见的三列布局

float浮动布局

<div class="float-contain">  
    <div class="left">左栏</div>
    <div class="right">右栏</div>
    <div class="middle">中间栏</div>
</div>
.float-contain{ width:100%;height:100px;}  
.float-contain .left{float:left;width:100px;height:100%;background: #1ABC9C}  
.float-contain .right{float:right;width:100px;height:100%;background: #FD482C}
.float-contain .middle{height:100%;background: yellow; margin-left: 100px;margin-right: 100px;}

position定位

<div class="pos-contain">  
    <div class="left">左栏</div>
    <div class="middle">中间栏</div>
    <div class="right">右栏</div>
</div>
.pos-contain{ width:100%;height:100px;position:relative;}  
.pos-contain .left{position: absolute;top:0;left:0;width:100px;height:100%;background: #1ABC9C}  
.pos-contain .right{position: absolute;top:0;right:0;width:100px;height:100%;background: #FD482C}
.pos-contain .middle{height:100%;background: yellow; margin-left: 100px;margin-right: 100px;}

flex布局

<div class="flex-contain">  
    <div class="left">左栏</div>
    <div class="middle">中间栏</div>
    <div class="right">右栏</div>
</div>
.flex-contain{ width:100%;height:100px;display:flex;display: -webkit-flex;}  
.flex-contain .left{width:100px;background: #1ABC9C;flex:none;} 
.flex-contain .right{width:100px;background: #FD482C;flex:none;} 
.flex-contain .middle{width: 100%;background:yellow;flex:1;}

圣杯布局

<div id="container">
    <div class="center">center</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
#container{padding:0 210px;overflow: hidden;font-size: 30px;}
.left,.center,.right{float: left;}
.center{ width:100%;height: 50px;background: blue;}
.left{position:relative;left: -210px; width:200px;height: 100px;margin-left: -100%;background: red;}
.right{ position: relative;right: -210px;width: 200px;height: 100px;margin-left: -200px;background: green;}

双飞翼布局

<div id="container2">
     <div class="center2">
         <div class="wrap">center2</div>
     </div>
     <div class="left2">left2</div>
     <div class="right2">right2</div>
</div>
#container2{width:100%; }
.left2,.right2, .center2{ float: left;}
.center2{width:100%; }
.center2 .wrap{height: 200px;margin-left: 210px;margin-right: 210px;background: #392;}
.left2{ width:200px;height: 100px;background: red;margin-left: -100%;}
.right2{width:200px; height: 100px;background: blue;margin-left: -200px; }