CSS等比例分割父级容器

以三等分为例: <div class="parent">   <div class="child"></div>    <div class="child"></div>    <div class="child"></div>    </d...

以三等分为例:


<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;
}

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
廖雪
廖雪

78 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. Stevengring 0 文章