浅谈CSS等比例分割父级容器

分手后的思念是犯贱 2022-09-29 11:58 225阅读 0赞

以三等分为例：

  1. <div class="parent">  
  2. <div class="child"></div>   
  3.     <div class="child"></div>   
  4.     <div class="child"></div>   
  5. </div>

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

  1. .parent{  
  2.        width:600px;  
  3.     height:600px;
  4. }    
  5. .child{  
  6.     width:33.3%;
  7.     height:100%;  
  8.       float:left;
  9. }

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

  1. .parent{  
  2.      width:600px;  
  3.        height:600px;
  4.     display:table;
  5. }    
  6. .child{  
  7.         display:table-cell;
  8. }

方法三：CSS3 flex布局

  1. .parent{  
  2.      width:600px;  
  3.        height:600px;
  4.     display:flex;
  5. }    
  6. .child{  
  7.         flex:1;
  8. }

发表评论

表情：
评论列表 （有 0 条评论，225人围观）

还没有评论，来说两句吧...

相关阅读

    相关 浅谈CSS hack

    CSS hack是对付IE的利器。 不同的浏览器，甚至同一浏览器的不同版本对CSS的解析认识不一样，可能会导致生成的页面效果不一致。 有了CSS hack，就可以针对不同的

    女爷i女爷i/ 0 赞/ 202 阅读

    相关 浅谈CSS布局

    CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。 在网页中，元素有三种布局模型： 1、流动模型（Flow） 2、浮动模型 (Float)

    r囧r小猫r囧r小猫/ 0 赞/ 315 阅读

    相关 浅谈CSS样式

    CSS全称为“层叠样式表 (CascadingStyle Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。 如下列代码：

    向右看齐向右看齐/ 0 赞/ 258 阅读

    相关 html+css浅谈

    自从来到兄弟连还没上过战地日记呢，心里有点不甘，就把自己昨天写的日记拿来和大家分享一下，是关于html和css的方面的，写的不好，大家不好口水。 这 2天完成了2个网站的首

    灰太狼灰太狼/ 0 赞/ 255 阅读

    相关 浅谈C++ STL 容器

    什么是容器 首先，我们必须理解一下什么是容器，在C++ 中容器被定义为：在数据存储上，有一种对象类型，它可以持有其它对象或指向其它对像的指针，这种对象类型就叫做容器。很简单，

    痛定思痛。痛定思痛。/ 0 赞/ 291 阅读