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

2019年10月9日08:44:07 评论 24

这篇文章主要为大家详细介绍了CSS实现等分布局的4种方式,等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的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. <p class="parentWrap">

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

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

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

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

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

  7. </p>

  8. </p>

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

【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. <p class="parentWrap">

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

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

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

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

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

  7. </p>

  8. </p>

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

【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. <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;">1</p>

  5. </p>

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

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

  8. </p>

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

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

  11. </p>

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

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

  14. </p>

  15. </p>

  16. </p>

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

思路二: 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. <p class="parentWrap">

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

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

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

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

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

  7. </p>

  8. </p>

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

【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. <p class="parentWrap">

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

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

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

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

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

  7. </p>

  8. </p>

【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. <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;">1</p>

  5. </p>

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

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

  8. </p>

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

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

  11. </p>

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

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

  14. </p>

  15. </p>

  16. </p>

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

思路三: 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. <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;">1</p>

  5. </p>

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

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

  8. </p>

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

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

  11. </p>

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

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

  14. </p>

  15. </p>

  16. </p>

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

【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. <p class="parent" style="background-color: lightgrey;">

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

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

  4. </p>

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

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

  7. </p>

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

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

  10. </p>

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

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

  13. </p>

  14. </p>

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

思路四: 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. <p class="parent" style="background-color: lightgrey;">

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

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

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

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

  6. </p>

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

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

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

以上就是CSS实现等分布局的4种方式的详细内容,更多请关注css教程其它相关文章!

weinxin
欢迎加入中国站长博客之家
本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: