CSS实现等分布局的4种⽅式等分布局是指⼦元素平均分配⽗元素宽度的布局⽅式，本⽂将介绍实现等分布局的4种⽅式
思路⼀: float
缺点：结构和样式存在耦合性，IE7-浏览器下对宽度百分⽐取值存在四舍五⼊的误差
【1】float + padding + background-clip
使⽤padding来实现⼦元素之间的间距，使⽤background-clip使⼦元素padding部分不显⽰背景CSS Code复制内容到剪贴板
1. <style>
2. body,p{margin: 0;}
flex布局对齐方式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>
19.
XML/HTML Code复制内容到剪贴板
1. <div class="parentWrap">
2. <div class="parent" >
3. <div class="child" >1</div>
4. <div class="child" >2</div>
5. <div class="child" >3</div>
6. <div class="child" >4</div>
7. </div>
8. </div>
9.
【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. <div class="parentWrap">
2. <div class="parent" >
3. <div class="child" >1</div>
4. <div class="child" >2</div>
5. <div class="child" >3</div>
6. <div class="child" >4</div>
7. </div>
8. </div>
9.
【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>
19.
XML/HTML Code复制内容到剪贴板
1. <div class="parentWrap">
2. <div class="parent" >
3. <div class="child" >
4. <div class="in" >1</div>
5. </div>
6. <div class="child" >
7. <div class="in" >2</div>
8. </div>
9. <div class="child" >
10. <div class="in" >3</div>
11. </div>
12. <div class="child" >
13. <div class="in" >4</div>
14. </div>
15. </div>
16. </div>
17.
思路⼆: 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>
21.
XML/HTML Code复制内容到剪贴板
1. <div class="parentWrap">
2. <div class="parent" >
3. <div class="child" >1</div>
4. <div class="child" >2</div>
5. <div class="child" >3</div>
6. <div class="child" >4</div>
7. </div>
8. </div>
9.
【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>
19.
XML/HTML Code复制内容到剪贴板
1. <div class="parentWrap">
2. <div class="parent" >
3. <div class="child" >1</div>
4. <div class="child" >2</div>
5. <div class="child" >3</div>
6. <div class="child" >4</div>
7. </div>
8. </div>
9.
【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>
21.
XML/HTML Code复制内容到剪贴板
1. <div class="parentWrap">
2. <div class="parent" >
3. <div class="child" >
4. <div class="in" >1</div>
5. </div>
6. <div class="child" >
7. <div class="in" >2</div>
8. </div>
9. <div class="child" >
10. <div class="in" >3</div>
11. </div>
12. <div class="child" >
13. <div class="in" >4</div>
14. </div>
15. </div>
16. </div>
17.
思路三: 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>
17.
XML/HTML Code复制内容到剪贴板
1. <div class="parentWrap">
2. <div class="parent" >
3. <div class="child" >
4. <div class="in" >1</div>
5. </div>
6. <div class="child" >
7. <div class="in" >2</div>
8. </div>
9. <div class="child" >
10. <div class="in" >3</div>
11. </div>
12. <div class="child" >
13. <div class="in" >4</div>
14. </div>
15. </div>
16. </div>
17.
【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. }
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论