html：
<div class="container">
<div class="childDiv"></div>
<div class="childDiv"></div>
<div class="childDiv"></div>
</div>
css:
法一：浮動布局+百分比
.container{
overflow: hidden;
zoom:1;
width:500px;
height:200px;
border:1px solid red;
}
.childDiv{
float:left;
width:33.3%;
height:100%;
border:1px solid red;
background:greenyellow;
}
法二：行內(nèi)元素+百分比
.container{
font-size: 0;
overflow: hidden;
width:500px;
height:200px;
border:1px solid lightblue;
}
.childDiv{
display: inline-block;
width: 33.3%;
height:100%;
border:1px solid gray;
}
法三：父元素 display:table + 子元素 display:table-cell
.container{
width:500px;
height:200px;
display: table;
border:1px solid lightblue;
}
.childDiv{
display: table-cell;
border:1px solid gray;
}
法四：css3 display:flex
.container{
width:500px;
height:200px;
display: flex;
border:1px solid lightblue;
}
.childDiv{
flex:1;
border:1px solid gray;
}
