CSS实现等分布局的4种方式

思路一: float

缺点:结构和样式存在耦合性,IE7-浏览器下对宽度百分比取值存在四舍五入的误差

【1】float + padding + background-clip

使用padding来实现子元素之间的间距,使用background-clip使子元素padding部分不显示背景

CSS Code 复制内容到剪贴板
  1.    
CSS Code 复制内容到剪贴板
  1.    

【2】float + margin + calc

使用margin实现子元素之间的间距,使用calc()函数计算子元素的宽度

CSS Code 复制内容到剪贴板
  1.   
XML/HTML Code 复制内容到剪贴板
  1. <div class="parentWrap">  
  2.     <div class="parent" style="background-color: lightgrey;">  
  3.         <div class="child" style="background-color: lightblue;">1div>  
  4.         <div class="child" style="background-color: lightgreen;">2div>  
  5.         <div class="child" style="background-color: lightsalmon;">3div>  
  6.         <div class="child" style="background-color: pink;">4div>                   
  7.     div>       
  8. div>  
  9.   

【3】float + margin + (fix)

使用margin实现子元素之间的间距,通过增加结构来实现兼容

CSS Code 复制内容到剪贴板
  1.   
  2.   
XML/HTML Code 复制内容到剪贴板
  1. <div class="parentWrap">  
  2.     <div class="parent" style="background-color: lightgrey;">  
  3.         <div class="child" style="background-color: blue;">  
  4.             <div class="in" style="background-color: lightblue;">1div>  
  5.         div>  
  6.         <div class="child" style="background-color: green;">  
  7.             <div class="in" style="background-color: lightgreen;">2div>  
  8.         div>  
  9.         <div class="child" style="background-color: orange;">  
  10.             <div class="in" style="background-color: lightsalmon;">3div>  
  11.         div>  
  12.         <div class="child" style="background-color: red;">  
  13.             <div class="in" style="background-color: pink;">4div>  
  14.         div>                   
  15.     div>       
  16. div>  

思路二: inline-block

缺点:需要设置垂直对齐方式vertical-align,则需要处理换行符解析成空格的间隙问题。IE7-浏览器不支持给块级元素设置inline-block属性,兼容代码是display:inline;zoom:1;

【1】inline-block + padding + background-clip

CSS Code 复制内容到剪贴板
  1.    
XML/HTML Code 复制内容到剪贴板
  1. <div class="parentWrap">  
  2.     <div class="parent" style="background-color: lightgrey;">  
  3.         <div class="child" style="background-color: lightblue;">1div>  
  4.         <div class="child" style="background-color: lightgreen;">2div>  
  5.         <div class="child" style="background-color: lightsalmon;">3div>  
  6.         <div class="child" style="background-color: pink;">4div>                   
  7.     div>       
  8. div>  
  9.   

【2】inline-block + margin + calc

CSS Code 复制内容到剪贴板
  1.   
  2.   
XML/HTML Code 复制内容到剪贴板
  1. <div class="parentWrap">  
  2.     <div class="parent" style="background-color: lightgrey;">  
  3.         <div class="child" style="background-color: lightblue;">1div>  
  4.         <div class="child" style="background-color: lightgreen;">2div>  
  5.         <div class="child" style="background-color: lightsalmon;">3div>  
  6.         <div class="child" style="background-color: pink;">4div>                   
  7.     div>       
  8. div>  
  9.   

【3】inline-block + margin + (fix)

CSS Code 复制内容到剪贴板
  1.    
XML/HTML Code 复制内容到剪贴板
  1. <div class="parentWrap">  
  2.     <div class="parent" style="background-color: lightgrey;">  
  3.         <div class="child" style="background-color: blue;">  
  4.             <div class="in" style="background-color: lightblue;">1div>  
  5.         div>  
  6.         <div class="child" style="background-color: green;">  
  7.             <div class="in" style="background-color: lightgreen;">2div>  
  8.         div>  
  9.         <div class="child" style="background-color: orange;">  
  10.             <div class="in" style="background-color: lightsalmon;">3div>  
  11.         div>  
  12.         <div class="child" style="background-color: red;">  
  13.             <div class="in" style="background-color: pink;">4div>  
  14.         div>                   
  15.     div>       
  16. div>  

思路三: table

缺点:元素被设置为table后,内容撑开宽度。若要兼容IE7-浏览器,需要改为

结构。table-cell元素无法设置margin,设置padding及background-clip也不可行

【1】table + margin负值

CSS Code 复制内容到剪贴板
  1.   
  2.   
XML/HTML Code 复制内容到剪贴板
  1. <div class="parentWrap">  
  2.     <div class="parent" style="background-color: lightgrey;">  
  3.         <div class="child" style="background-color: blue;">  
  4.             <div class="in" style="background-color: lightblue;">1div>  
  5.         div>  
  6.         <div class="child" style="background-color: green;">  
  7.             <div class="in" style="background-color: lightgreen;">2div>  
  8.         div>  
  9.         <div class="child" style="background-color: orange;">  
  10.             <div class="in" style="background-color: lightsalmon;">3div>  
  11.         div>  
  12.         <div class="child" style="background-color: red;">  
  13.             <div class="in" style="background-color: pink;">4div>  
  14.         div>                   
  15.     div>       
  16. div>  

【2】table + 兄弟选择器

CSS Code 复制内容到剪贴板
  1.   
  2.   
XML/HTML Code 复制内容到剪贴板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="child" style="background-color: blue;">  
  3.         <div class="in" style="background-color: lightblue;">1div>  
  4.     div>  
  5.     <div class="child" style="background-color: green;">  
  6.         <div class="in" style="background-color: lightgreen;">2div>  
  7.     div>  
  8.     <div class="child" style="background-color: orange;">  
  9.         <div class="in" style="background-color: lightsalmon;">3div>  
  10.     div>  
  11.     <div class="child" style="background-color: red;">  
  12.         <div class="in" style="background-color: pink;">4div>  
  13.     div>                   
  14. div>       

思路四: flex

CSS Code 复制内容到剪贴板
  1.    
XML/HTML Code 复制内容到剪贴板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="child" style="background-color: lightblue;">1div>  
  3.     <div class="child" style="background-color: lightgreen;">2div>  
  4.     <div class="child" style="background-color: lightsalmon;">3div>  
  5.     <div class="child" style="background-color: pink;">4div>                   
  6. div>     

以上就是本文的全部内容,希望对大家的学习有所帮助。

你可能感兴趣的:(CSS实现等分布局的4种方式)