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

这篇文章主要为大家详细介绍了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

上一篇：CSS3教程：background-clip和background-origin下一篇：Android Layout 布局属性全解

相关文章

查看更多

• JSDOMReady事件的六种实现方法总结
• CSS实现页面各种列布局的示例
• 纯CSS3全屏响应式幻灯片特效
• 纯CSS3超酷彩色3D按钮样式
• 超炫CSS3六边形菜单动画特效

• 首页

• 课程

• 问答

• 我的

• 首页
• 课程
• 文章
• 问答
• 词典
• 手册
• 下载
• 专题

首页

文章

问答

课程

专题

下载

手游

词典

简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）