多列布局：定宽+自适应，不定宽+自适应，等宽布局，等高布局
多列布局：定宽+自适应，不定宽+自适应，等宽布局，等高布局
1、 两列布局
（1） 1列定宽+1列自适应
示例：
html代码：
<div class="parent">
<div class="left">
<p>left定宽p>
div>
<div class="right">
<p>right1自适应p>
<p>right2p>
div>
div>css样式：
/* 方法一: float + margin ) */
.left{
float:left;
width:300px;
background-color: #5f5;
}
.right{
margin-left:310px;
background-color: #c5c;
}
/* 方法二 : float + overflow */
.left{
float: left;
width:300px;
margin-right:10px;
background-color: #5f5;
}
.right{
overflow: hidden;
background-color: #c5c;
}
/* 方法三: table */
.parent{
display: table;
width:100%;
table-layout: fixed;
}
.left{
display: table-cell;
width: 300px;
padding-right: 20px;
background: #5f5;
}
.right{
display: table-cell;
background: #c5c;
}
/* 方法四: flex */
.parent{
display: flex;
}
.left{
width: 300px;
margin-right: 10px;
background: #5f5;
}
.right{
flex: 1;
background: #c5c;
}
/* 方法五：float + margin + position */
html代码：
<div class="parent">
<div class="left">
<p>left定宽p>
div>
<div class="right-fix">
<div class="right">
<p>right1自适应p>
<p>right2p>
div>
div>
div>
css代码：
.left{
float:left;
width:100px;
position: relative;
background-color: #5f5;
}
.right-fix{
float: right;
width:100%;
margin-left:-100px;
}
.right{
margin: -20px 0 0 110px;
background-color: #c5c;
}（2） 1列不定宽+1列自适应
示例:
html代码：
<div class="parent">
<div class="left">
<p>leftp>
<p>left不定宽p>
div>
<div class="right">
<p>rightp>
<p>自适应p>
div>
div>css样式：
/* 方法一：float + overflow */
.left{
float: left;
margin-right:10px;
background-color: #5f5;
}
.right{
overflow: hidden;
background-color: #c5c;
}
/* 方法二： table */
.parent{
display: table;
width: 100%;
}
.left{
width: 0.1%;
display: table-cell;
background-color: #5f5;
}
.left p{
width:100px;
}
.right{
display: table-cell;
background-color: #c5c;
}
/* 方法三: flex */
.parent{
display: flex;
}
.left{
margin-right: 10px;
background-color: #5f5;
}
.right{
flex:1;
background-color: #c5c;
}2、 多列布局
（1） 多列定宽+1列自适应
示例：
html代码：
.left,.center{
float: left;
width: 200px;
margin-right: 10px;
background-color: #5f5;
}
.right{
overflow: hidden;
background-color: #c5c;
}css样式：
.left,.center{
float: left;
width: 200px;
margin-right: 10px;
background-color: #5f5;
}
.right{
overflow: hidden;
background-color: #c5c;
}（2） 多列不定宽+1列自适应
示例：
html代码：
<div class="parent">
<div class="left">
<p>leftp>
<p>定宽p>
div>
<div class="center">
<p>centerp>
<p>定宽p>
div>
<div class="right">
<p>rightp>
<p>自适应p>
div>
div>css样式：
.left,.center{
float: left;
margin-right: 10px;
background-color: #5f5;
}
.right{
overflow: hidden;
background-color: #c5c;
}3、 等分布局
示例：
html代码：
<div class="parent">
<div class="one">
<p>onep>
div>
<div class="two">
<p>twop>
div>
<div class="three">
<p>threep>
div>
<div class="four">
<p>fourp>
div>
div>css样式：
/* 方法一 : float */
.parent{
margin-right:10px;
}
.one,.two,.three,.four{
float: left;
width: 24%;
box-sizing: border-box;
margin-left: 10px;
background: #c5c;
}
/* 方法二: flex */
.parent{
display: flex;
}
.one,.two,.three,.four{
flex: 1;
margin-left: 10px;
background: #c5c;
}
/* 方法三 : table */
.parent{
display: table;
width: 100%;
table-layout: fixed;
}
.one,.two,.three,.four{
display: table-cell;
border: 1px solid #c5c;
}4、 等高布局
示例：
html代码：
<div class="parent">
<div class="left">
<p>leftp>
<p>等高布局p>
div>
<div class="right">
<p>rightp>
<p>等高布局p>
div>
div>css样式：
/* 方法一: float */
.parent{
overflow: hidden;
}
.left,.right{
padding-bottom:9999px;
margin-bottom:-9999px;
}
.left{
float: left;
width: 200px;
margin-right: 10px;
background-color: #5f5;
}
.right{
overflow: hidden;
background-color: #c5c;
}
/* 方法二: flex */
.parent{
display: flex;
}
.left{
width: 200px;
margin-right: 10px;
background-color: #5f5;
}
.right{
flex: 1;
background-color: #c5c;
}
/*方法三: table*/
.parent{
display: table;
width: 100%;
table-layout: fixed;
}
.left,.right{
display: table-cell;
}
.left{
width: 200px;
padding-right: 10px;
background-color: #5f5;
}
.right{
background-color: #c5c;
}