css实现两栏布局、三栏布局

1.两栏布局

//html
<div class="wrapper">
	<div class="left">
		    左边固定宽度，高度不固定
	</div>
	<div class="right">
		    这里的内容可能比左侧高，也可能比左侧低。宽度需要自适应。
	</div>
</div>

(1) grid

//css
.wrapper {
	padding: 15px 20px;
	border: 1px dashed #ff6c60;
	display: grid;
	grid-template-columns:120px 1fr;
	align-items: start;
}
.left {
	width: 120px;
	border: 5px solid #ddd;
	box-sizing: border-box;
	grid-column:1;
}
.right {
	margin-left: 20px;
	border: 5px solid #ddd;
	box-sizing: border-box;
	grid-column:2;
}

(2)flex

.wrapper {
	padding: 15px 20px;
	border: 1px dashed #ff6c60;
	display: flex;
}
.left {
	width: 120px;
	border: 5px solid #ddd;
	box-sizing: border-box;
}
.right {
	margin-left: 20px;
	border: 5px solid #ddd;
	box-sizing: border-box;
	flex:1;
}

(3)absolute

.wrapper {
	 padding: 15px 20px;
	 border: 1px dashed #ff6c60;
	 position: relative;	
}
.left {
	 width: 120px;
	 border: 5px solid #ddd;
	 box-sizing: border-box;
	 position: absolute;
	 left: 0;
}
.right {
	 margin-left: 20px;
	 border: 5px solid #ddd;
	 box-sizing: border-box;
	 position: absolute;
	 left: 120px;
	 right: 0;
}

(4)float

.wrapper {
	padding: 15px 20px;
	border: 1px dashed #ff6c60;
	/*overflow: hidden;*/
	overflow: auto; 
}
.left {
	width: 120px;
	border: 5px solid #ddd;
	box-sizing: border-box;
	float: left;
}
.right {
    margin-left: 140px;
	border: 5px solid #ddd;
	box-sizing: border-box;
}

(5) table

.wrapper {
	padding: 15px 20px;
	border: 1px dashed #ff6c60;
	box-sizing: border-box;
	display: table;
	/*列宽由单元格内容设定*/
	table-layout:fixed;
	width: 100%;
}
.left {
	width: 120px;
	border: 5px solid #ddd;
	box-sizing: border-box;
	display: table-cell;
}
.right {
	 border: 5px solid #ddd;
	 box-sizing: border-box;
	 display: table-cell;
}

2.三栏布局

//html
<div class="parent">
   <div class="left"><span>div-left</span></div>
   <div class="right"><span>div-right</span></div>
   <!--根据float对后面元素的影响，主元素要放在文档流最后-->
   <div class="middle"><span>div-middle</span></div>
</div>

(1)float

.left{
   float: left;
   background-color: red;
   width: 150px;
   height: 50px;
}
.right{
   float: right;
   background-color: yellow;
   width: 200px;
   height: 50px;
}
.middle{
   margin: 0 200px 0 150px;
   background-color: #fff9ca;
   height: 50px;
}

(2)absolute+margin

.left{
     background-color: red;
     width: 150px;
     height: 50px;
     position: absolute;
     left: 0;
}
.right{
     background-color: yellow;
     width: 200px;
     height: 50px;
     position: absolute;
     right: 0;
}
.middle{
    margin: 0 200px 0 150px;
    background-color: #fff9ca;
    height: 50px;
}

(3)flex

//html
<div class="parent">
    <div class="left"><span>div-left</span></div>
    <div class="middle"><span>div-middle</span></div>
    <div class="right"><span>div-right</span></div>
</div>
//css
.parent{
    display: flex;
}
.left{
    background-color: red;
    width: 150px;
    height: 50px;
}
.right{
    background-color: yellow;
    width: 200px;
    height: 50px;
}
.middle{
    flex: 1;
    background-color: #fff9ca;
    height: 50px;
}

(4)table

//html
<div class="parent">
   <div class="left"><span>div-left</span></div>
   <div class="middle"><span>div-middle</span></div>
   <div class="right"><span>div-right</span></div>
</div>
//css
.parent{
   display: table;
   width: 100%;
}
.left{
   background-color: red;
   width: 150px;
   height: 50px;
   display: table-cell;
}
.right{
    background-color: yellow;
    width: 200px;
    height: 50px;
    display: table-cell;
}
.middle{
   background-color: #fff9ca;
   height: 50px;
   display: table-cell;
}

(5)圣杯布局

//html
<!-- 主元素要放在文档流最前面-->
<div class="box">
	<div class="center">center</div>
	<div class="left">left</div>
	<div class="right">right</div>	
</div>
//css
.box{
   padding:  0 100px; /*留出左右的距离*/
   height: 100px;
}
.center{
   float: left;
   width: 100%;
   height: 50px;
   background-color: yellow;         
}
.left{
   float: left;
   width: 100px;
   margin-left: -100%;
   height: 50px;
   background-color: red;
   position: relative;
   left: -100px;/*往左拉*/
}
.right{
   float: left;
   width: 100px;
   height:50px;
   margin-left: -100px;
   background-color: green;
   position: relative;
   right: -100px;/*往右拉*/
}

(6)双飞翼布局

//html
<div class="box">
    <div class="middle-wrap">
        <div class="middle"><span>div-middle</span></div>
     </div>
    <div class="left"><span>div-left</span></div>
    <div class="right"><span>div-right</span></div>
</div>
//css
 .middle-wrap {
    float: left;
    width: 100%;
    height: 50px;
    background-color: yellow;
}
.middle-wrap .middle{
    height: 50px;
    margin: 0 100px; /*留出距离*/
    background-color: yellow;
}
.left{
   float: left;
   width: 100px;
   margin-left: -100%;
   height: 50px;
   background-color: red;
}
.right{
   float: left;
   width: 100px;
   height:50px;
   margin-left: -100px;
   background-color: green;
} 

(7)grid

//html
<div class="parent">
  <div class="left"><span>div-left</span></div>
  <div class="middle"><span>div-middle</span></div>
  <div class="right"><span>div-right</span></div>
</div>
//css
.parent{
   display: grid;
   width: 100%;
   grid-template-columns:150px auto 200px;
}
.left{
    background-color: red;
    height: 50px;
}
.right{
   background-color: yellow;
   height: 50px;
}
.middle{
    background-color: #fff9ca;
    height: 50px;
}