前端 布局方式 及 实例

1、右列定宽，左列自适应

html布局：
	<div class ="parent">
		<div class ="left"> </div>
		<div class ="right"> </div>
	</div>
样式设置；	
1.使用float+margin实现。
	.parent{
		background: red;
		height:100px;
		margin:0 auto;
	}
	.left{
		background:green;
		margin-right:-100px;
		width:100%;
		float:left;
	}
	.right{
		float：right;
		width：100px;
		background:blue;
	}
2.使用table实现
	.parent{
		display:table;
		table-layout:fixed;
		width:100%;
	}
	.left{
		 display:table-cell;
	 }
	 .right{
		  width:100px;
		  display:table-cell;
	  }
3.使用flex实现
	.parent{
		display:flex; 
	}	  
	.left{
		 flex:1;
	 }
	 .right{
		width:100px;
	}

2、两侧定宽，中栏自适应

1.利用float+margin实现
	.left{
		 height:100px
		 background:red;
		 width:100px;
		 float:left;
	 }
	 .center{
		height:100px
		background:green;
		float:left;
		width:100%;
		margin-right:-200px;	
	}
	.right{
		height:100px
		background:blue;
		width:100px;
		float:right;
	 }

3、九宫格布局

html部分	
<div class="parent">
	<div class="row">
		<div class="item "></div>
		<div class="item "></div>
		<div class="item three"></div>
	</div>
	<div class="row">
		<div class="item "></div>
		<div class="item "></div>
		<div class="item three"></div>
	</div>
	<div class="row">
		<div class="item one"></div>
		<div class="item two"></div>
		<div class="item three four"></div>
	</div>
</div>
		 
样式部分：
1.使用table实现
.parent{
	background: red;
	display:table;
	table-layout: fixed;
	width: 100%;
}
.row{

	display: table-row;
}			
.item{
	border: 1px solid gray;
	display: table-cell;
	width: 33.3%;
	height: 200px;
}		 
2.使用flex实现
	
.parent{
	display: flex;
	flex-direction: column;
}
.row{
	height: 100px;
	display: flex;
}
.item{
	border-left: 1px solid gray;
	border-top: 1px solid gray;
	width: 100px;
	background: red;
}		
.three{
	border-right: 1px solid gray;
}
.one{
	border-bottom: 1px solid gray;
}
.two{
	border-bottom:1px solid gray ;
}
.four{
	border-bottom: 1px solid gray;
}