CSS等比例分割父级容器

以三等分为例：

 

<div class="parent">  
<div class="child"></div>   
<div class="child"></div>   
<div class="child"></div>   
</div>

 

 

方法一：浮动布局+百分比

 

.parent{  
   width:600px;  
height:600px;
}    
.child{  
width:33.3%;
height:100%;  
  float:left;
}

 

 

方法二：父元素display:table+ 子元素display:table-cell

 

.parent{  
 width:600px;  
   height:600px;
display:table;
}    
.child{  
    display:table-cell;
} 

 

 

方法三：CSS3 flex布局

 

.parent{  
 width:600px;  
   height:600px;
display:flex;
}    
.child{  
    flex:1;
}