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

今天中国E盟技术频道的小编将给小伙伴们讲述CSS实现等分布局的四种方式，等分布局是指子元素平均分配父元素宽度的布局方式，本文将介绍实现等分布局的4种方式，感兴趣的小伙伴们可以参考一下

思路一: float

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

【1】float + padding + background-clip

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

CSS Code复制内容到剪贴板
  2. body,p{margin:0;}
  3. .parentWrap{
  4. overflow:hidden;
  5. }
  6. .parent{
  7. margin-right:-20px;
  8. overflow:hidden;
  9. }
  10. .child{
  11. float:left;
  12. height:100px;
  13. width:25%;
  14. padding-right:20px;
  15. box-sizing:border-box;
  16. background-clip:content-box;
  17. }
XML/HTML Code复制内容到剪贴板
  1. <divclass="parentWrap">
  2. <divclass="parent"style="background-color:lightgrey;">
  3. <divclass="child"style="background-color:lightblue;">1div>
  4. <divclass="child"style="background-color:lightgreen;">2div>
  5. <divclass="child"style="background-color:lightsalmon;">3div>
  6. <divclass="child"style="background-color:pink;">4div>
  7. div>
  8. div>

【2】float + margin + calc

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

CSS Code复制内容到剪贴板
  2. body,p{margin:0;}
  3. .parentWrap{
  4. overflow:hidden;
  5. }
  6. .parent{
  7. overflow:hidden;
  8. margin-right:-20px;
  9. }
  10. .child{
  11. float:left;
  12. height:100px;
  13. width:calc(25%-20px);
  14. margin-right:20px;
  15. }
XML/HTML Code复制内容到剪贴板
  1. <divclass="parentWrap">
  2. <divclass="parent"style="background-color:lightgrey;">
  3. <divclass="child"style="background-color:lightblue;">1div>
  4. <divclass="child"style="background-color:lightgreen;">2div>
  5. <divclass="child"style="background-color:lightsalmon;">3div>
  6. <divclass="child"style="background-color:pink;">4div>
  7. div>
  8. div>

【3】float + margin + (fix)

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

CSS Code复制内容到剪贴板
  2. body,p{margin:0;}
  3. .parentWrap{
  4. overflow:hidden;
  5. }
  6. .parent{
  7. overflow:hidden;
  8. margin-right:-20px;
  9. }
  10. .child{
  11. float:left;
  12. width:25%;
  13. }
  14. .in{
  15. margin-right:20px;
  16. height:100px;
  17. }
XML/HTML Code复制内容到剪贴板
  1. <divclass="parentWrap">
  2. <divclass="parent"style="background-color:lightgrey;">
  3. <divclass="child"style="background-color:blue;">
  4. <divclass="in"style="background-color:lightblue;">1div>
  5. div>
  6. <divclass="child"style="background-color:green;">
  7. <divclass="in"style="background-color:lightgreen;">2div>
  8. div>
  9. <divclass="child"style="background-color:orange;">
  10. <divclass="in"style="background-color:lightsalmon;">3div>
  11. div>
  12. <divclass="child"style="background-color:red;">
  13. <divclass="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复制内容到剪贴板
  2. body,p{margin:0;}
  3. .parentWrap{
  4. overflow:hidden;
  5. }
  6. .parent{
  7. font-size:0;
  8. margin-right:-20px;
  9. overflow:hidden;
  10. }
  11. .child{
  12. display:inline-block;
  13. vertical-align:top;
  14. width:25%;
  15. padding-right:20px;
  16. box-sizing:border-box;
  17. background-clip:content-box;
  18. font-size:16px;
  19. }
XML/HTML Code复制内容到剪贴板
  1. <divclass="parentWrap">
  2. <divclass="parent"style="background-color:lightgrey;">
  3. <divclass="child"style="background-color:lightblue;">1div>
  4. <divclass="child"style="background-color:lightgreen;">2div>
  5. <divclass="child"style="background-color:lightsalmon;">3div>
  6. <divclass="child"style="background-color:pink;">4div>
  7. div>
  8. div>

【2】inline-block + margin + calc

CSS Code复制内容到剪贴板
  2. body,p{margin:0;}
  3. .parentWrap{
  4. overflow:hidden;
  5. }
  6. .parent{
  7. margin-right:-20px;
  8. font-size:0;
  9. }
  10. .child{
  11. display:inline-block;
  12. vertical-align:top;
  13. font-size:16px;
  14. height:100px;
  15. width:calc(25%-20px);
  16. margin-right:20px;
  17. }
XML/HTML Code复制内容到剪贴板
  1. <divclass="parentWrap">
  2. <divclass="parent"style="background-color:lightgrey;">
  3. <divclass="child"style="background-color:lightblue;">1div>
  4. <divclass="child"style="background-color:lightgreen;">2div>
  5. <divclass="child"style="background-color:lightsalmon;">3div>
  6. <divclass="child"style="background-color:pink;">4div>
  7. div>
  8. div>

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

CSS Code复制内容到剪贴板
  2. body,p{margin:0;}
  3. .parentWrap{
  4. overflow:hidden;
  5. }
  6. .parent{
  7. margin-right:-20px;
  8. font-size:0;
  9. }
  10. .child{
  11. display:inline-block;
  12. vertical-align:top;
  13. font-size:16px;
  14. width:25%;
  15. }
  16. .in{
  17. margin-right:20px;
  18. height:100px;
  19. }
XML/HTML Code复制内容到剪贴板
  1. <divclass="parentWrap">
  2. <divclass="parent"style="background-color:lightgrey;">
  3. <divclass="child"style="background-color:blue;">
  4. <divclass="in"style="background-color:lightblue;">1div>
  5. div>
  6. <divclass="child"style="background-color:green;">
  7. <divclass="in"style="background-color:lightgreen;">2div>
  8. div>
  9. <divclass="child"style="background-color:orange;">
  10. <divclass="in"style="background-color:lightsalmon;">3div>
  11. div>
  12. <divclass="child"style="background-color:red;">
  13. <divclass="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复制内容到剪贴板
  2. body,p{margin:0;}
  3. .parentWrap{
  4. overflow:hidden;
  5. }
  6. .parent{
  7. display:table;
  8. width:calc(100%+20px);
  9. table-layout:fixed;
  10. }
  11. .child{
  12. display:table-cell;
  13. height:100px;
  14. padding-right:20px;
  15. }
XML/HTML Code复制内容到剪贴板
  1. <divclass="parentWrap">
  2. <divclass="parent"style="background-color:lightgrey;">
  3. <divclass="child"style="background-color:blue;">
  4. <divclass="in"style="background-color:lightblue;">1div>
  5. div>
  6. <divclass="child"style="background-color:green;">
  7. <divclass="in"style="background-color:lightgreen;">2div>
  8. div>
  9. <divclass="child"style="background-color:orange;">
  10. <divclass="in"style="background-color:lightsalmon;">3div>
  11. div>
  12. <divclass="child"style="background-color:red;">
  13. <divclass="in"style="background-color:pink;">4div>
  14. div>
  15. div>
  16. div>


【2】table + 兄弟选择器

CSS Code复制内容到剪贴板
  2. body,p{margin:0;}
  3. .parent{
  4. display:table;
  5. width:100%;
  6. table-layout:fixed;
  7. }
  8. .child{
  9. display:table-cell;
  10. height:100px;
  11. }
  12. .child+.child{
  13. padding-left:20px;
  14. }
XML/HTML Code复制内容到剪贴板
  1. <divclass="parent"style="background-color:lightgrey;">
  2. <divclass="child"style="background-color:blue;">
  3. <divclass="in"style="background-color:lightblue;">1div>
  4. div>
  5. <divclass="child"style="background-color:green;">
  6. <divclass="in"style="background-color:lightgreen;">2div>
  7. div>
  8. <divclass="child"style="background-color:orange;">
  9. <divclass="in"style="background-color:lightsalmon;">3div>
  10. div>
  11. <divclass="child"style="background-color:red;">
  12. <divclass="in"style="background-color:pink;">4div>
  13. div>
  14. div>

思路四: flex

CSS Code复制内容到剪贴板
  2. body,p{margin:0;}
  3. .parent{
  4. display:flex;
  5. }
  6. .child{
  7. flex:1;
  8. height:100px;
  9. }
  10. .child+.child{
  11. margin-left:20px;
  12. }
XML/HTML Code复制内容到剪贴板
  1. <divclass="parent"style="background-color:lightgrey;">
  2. <divclass="child"style="background-color:lightblue;">1div>
  3. <divclass="child"style="background-color:lightgreen;">2div>
  4. <divclass="child"style="background-color:lightsalmon;">3div>
  5. <divclass="child"style="background-color:pink;">4div>
  6. div>

以上就是CSS实现等分布局的四种方式的全部内容，希望对大家的学习有所帮助，更多关于CSS的内容，请继续关注中国E盟技术频道。

    A+
发布日期：2019-09-20  所属分类：CSS
标签：