首页  >  文章  >  web前端  >  CSS实现等分布局的4种方式

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

巴扎黑
巴扎黑原创
2017-06-28 11:00:132415浏览

这篇文章主要为大家详细介绍了CSS实现等分布局的4种方式,等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的4种方式,感兴趣的小伙伴们可以参考一下

等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的4种方式

思路一: float

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

【1】float + padding + background-clip

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


CSS Code复制内容到剪贴板

  1.   

  2.   


XML/HTML Code复制内容到剪贴板

  1. <p class="parentWrap">  

  2.     <p class="parent" style="background-color: lightgrey;">  

  3.         <p class="child" style="background-color: lightblue;">1p>  

  4.         <p class="child" style="background-color: lightgreen;">2p>  

  5.         <p class="child" style="background-color: lightsalmon;">3p>  

  6.         <p class="child" style="background-color: pink;">4p>                   

  7.     p>       

  8. p>  

  9.   

【2】float + margin + calc

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


CSS Code复制内容到剪贴板

  1.   


XML/HTML Code复制内容到剪贴板

  1. <p class="parentWrap">  

  2.     <p class="parent" style="background-color: lightgrey;">  

  3.         <p class="child" style="background-color: lightblue;">1p>  

  4.         <p class="child" style="background-color: lightgreen;">2p>  

  5.         <p class="child" style="background-color: lightsalmon;">3p>  

  6.         <p class="child" style="background-color: pink;">4p>                   

  7.     p>       

  8. p>  

  9.   

【3】float + margin + (fix)

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


CSS Code复制内容到剪贴板

  1.   

  2.   


XML/HTML Code复制内容到剪贴板

  1. <p class="parentWrap">  

  2.     <p class="parent" style="background-color: lightgrey;">  

  3.         <p class="child" style="background-color: blue;">  

  4.             <p class="in" style="background-color: lightblue;">1p>  

  5.         p>  

  6.         <p class="child" style="background-color: green;">  

  7.             <p class="in" style="background-color: lightgreen;">2p>  

  8.         p>  

  9.         <p class="child" style="background-color: orange;">  

  10.             <p class="in" style="background-color: lightsalmon;">3p>  

  11.         p>  

  12.         <p class="child" style="background-color: red;">  

  13.             <p class="in" style="background-color: pink;">4p>  

  14.         p>                   

  15.     p>       

  16. p>  

  17.   

思路二: inline-block

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

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


CSS Code复制内容到剪贴板

  1.   

  2.   


XML/HTML Code复制内容到剪贴板

  1. <p class="parentWrap">  

  2.     <p class="parent" style="background-color: lightgrey;">  

  3.         <p class="child" style="background-color: lightblue;">1p>  

  4.         <p class="child" style="background-color: lightgreen;">2p>  

  5.         <p class="child" style="background-color: lightsalmon;">3p>  

  6.         <p class="child" style="background-color: pink;">4p>                   

  7.     p>       

  8. p>  

  9.   

【2】inline-block + margin + calc


CSS Code复制内容到剪贴板

  1.   

  2.   


XML/HTML Code复制内容到剪贴板

  1. <p class="parentWrap">  

  2.     <p class="parent" style="background-color: lightgrey;">  

  3.         <p class="child" style="background-color: lightblue;">1p>  

  4.         <p class="child" style="background-color: lightgreen;">2p>  

  5.         <p class="child" style="background-color: lightsalmon;">3p>  

  6.         <p class="child" style="background-color: pink;">4p>                   

  7.     p>       

  8. p>  

  9.   

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


CSS Code复制内容到剪贴板

  1.   

  2.   


XML/HTML Code复制内容到剪贴板

  1. <p class="parentWrap">  

  2.     <p class="parent" style="background-color: lightgrey;">  

  3.         <p class="child" style="background-color: blue;">  

  4.             <p class="in" style="background-color: lightblue;">1p>  

  5.         p>  

  6.         <p class="child" style="background-color: green;">  

  7.             <p class="in" style="background-color: lightgreen;">2p>  

  8.         p>  

  9.         <p class="child" style="background-color: orange;">  

  10.             <p class="in" style="background-color: lightsalmon;">3p>  

  11.         p>  

  12.         <p class="child" style="background-color: red;">  

  13.             <p class="in" style="background-color: pink;">4p>  

  14.         p>                   

  15.     p>       

  16. p>  

  17.   

思路三: table

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

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

【1】table + margin负值


CSS Code复制内容到剪贴板

  1.   

  2.   


XML/HTML Code复制内容到剪贴板

  1. <p class="parentWrap">  

  2.     <p class="parent" style="background-color: lightgrey;">  

  3.         <p class="child" style="background-color: blue;">  

  4.             <p class="in" style="background-color: lightblue;">1p>  

  5.         p>  

  6.         <p class="child" style="background-color: green;">  

  7.             <p class="in" style="background-color: lightgreen;">2p>  

  8.         p>  

  9.         <p class="child" style="background-color: orange;">  

  10.             <p class="in" style="background-color: lightsalmon;">3p>  

  11.         p>  

  12.         <p class="child" style="background-color: red;">  

  13.             <p class="in" style="background-color: pink;">4p>  

  14.         p>                   

  15.     p>       

  16. p>  

  17.   


【2】table + 兄弟选择器


CSS Code复制内容到剪贴板

  1.   

  2.   


XML/HTML Code复制内容到剪贴板

  1. <p class="parent" style="background-color: lightgrey;">  

  2.     <p class="child" style="background-color: blue;">  

  3.         <p class="in" style="background-color: lightblue;">1p>  

  4.     p>  

  5.     <p class="child" style="background-color: green;">  

  6.         <p class="in" style="background-color: lightgreen;">2p>  

  7.     p>  

  8.     <p class="child" style="background-color: orange;">  

  9.         <p class="in" style="background-color: lightsalmon;">3p>  

  10.     p>  

  11.     <p class="child" style="background-color: red;">  

  12.         <p class="in" style="background-color: pink;">4p>  

  13.     p>                   

  14. p>       

  15.   

思路四: flex


CSS Code复制内容到剪贴板

  1.   

  2.   


XML/HTML Code复制内容到剪贴板

  1. <p class="parent" style="background-color: lightgrey;">  

  2.     <p class="child" style="background-color: lightblue;">1p>  

  3.     <p class="child" style="background-color: lightgreen;">2p>  

  4.     <p class="child" style="background-color: lightsalmon;">3p>  

  5.     <p class="child" style="background-color: pink;">4p>                   

  6. p>     

  7.   

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

本文链接:http://www.cnblogs.com/xiaohuochai/p/5456695.html

以上是CSS实现等分布局的4种方式的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn