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

网络
一段路旁，地瓜叶正茂密地延伸着手脚，棱角分明的叶子颇有生趣，纵横交错的长藤生长着密密匝匝的叶子，团团簇簇地拥挤在一起，生机勃勃。绿色在膨胀，触目不由得一阵舒服，在感叹大自然植物的神奇与美妙里，也感谢阳光的无私赠与。

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

思路一: float

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

【1】float + padding + background-clip

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

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

【2】float + margin + calc

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

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

【3】float + margin + (fix)

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

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

【2】inline-block + margin + calc

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

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

CSS Code复制内容到剪贴板
  1. <style>
  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. }
  20. </style>
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;">1</div>
  5. </div>
  6. <divclass="child"style="background-color:green;">
  7. <divclass="in"style="background-color:lightgreen;">2</div>
  8. </div>
  9. <divclass="child"style="background-color:orange;">
  10. <divclass="in"style="background-color:lightsalmon;">3</div>
  11. </div>
  12. <divclass="child"style="background-color:red;">
  13. <divclass="in"style="background-color:pink;">4</div>
  14. </div>
  15. </div>
  16. </div>

思路三: table

缺点：元素被设置为table后，内容撑开宽度。若要兼容IE7-浏览器，需要改为<table>结构。table-cell元素无法设置margin，设置padding及background-clip也不可行

【1】table + margin负值

CSS Code复制内容到剪贴板
  1. <style>
  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. }
  16. </style>
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;">1</div>
  5. </div>
  6. <divclass="child"style="background-color:green;">
  7. <divclass="in"style="background-color:lightgreen;">2</div>
  8. </div>
  9. <divclass="child"style="background-color:orange;">
  10. <divclass="in"style="background-color:lightsalmon;">3</div>
  11. </div>
  12. <divclass="child"style="background-color:red;">
  13. <divclass="in"style="background-color:pink;">4</div>
  14. </div>
  15. </div>
  16. </div>


【2】table + 兄弟选择器

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

思路四: flex

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

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

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

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例