CSS實(shí)現(xiàn)等分布局的4種方式

等分布局是指子元素平均分配父元素寬度的布局方式，本文將介紹實(shí)現(xiàn)等分布局的4種方式

思路一: float

缺點(diǎn):結(jié)構(gòu)和樣式存在耦合性，IE7-瀏覽器下對寬度百分比取值存在四舍五入的誤差

【1】float + padding + background-clip

使用padding來實(shí)現(xiàn)子元素之間的間距，使用background-clip使子元素padding部分不顯示背景

CSS Code復(fù)制內(nèi)容到剪貼板

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復(fù)制內(nèi)容到剪貼板

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>

【2】float + margin + calc

使用margin實(shí)現(xiàn)子元素之間的間距，使用calc()函數(shù)計(jì)算子元素的寬度

CSS Code復(fù)制內(nèi)容到剪貼板

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復(fù)制內(nèi)容到剪貼板

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】float + margin + (fix)

使用margin實(shí)現(xiàn)子元素之間的間距，通過增加結(jié)構(gòu)來實(shí)現(xiàn)兼容

CSS Code復(fù)制內(nèi)容到剪貼板

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復(fù)制內(nèi)容到剪貼板

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>

思路二: inline-block

缺點(diǎn)：需要設(shè)置垂直對齊方式vertical-align，則需要處理換行符解析成空格的間隙問題。IE7-瀏覽器不支持給塊級(jí)元素設(shè)置inline-block屬性，兼容代碼是display:inline;zoom:1;

【1】inline-block + padding + background-clip

CSS Code復(fù)制內(nèi)容到剪貼板

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復(fù)制內(nèi)容到剪貼板

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>

【2】inline-block + margin + calc

CSS Code復(fù)制內(nèi)容到剪貼板

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復(fù)制內(nèi)容到剪貼板

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復(fù)制內(nèi)容到剪貼板

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復(fù)制內(nèi)容到剪貼板

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>

思路三: table

缺點(diǎn)：元素被設(shè)置為table后，內(nèi)容撐開寬度。若要兼容IE7-瀏覽器，需要改為<table>結(jié)構(gòu)。table-cell元素?zé)o法設(shè)置margin，設(shè)置padding及background-clip也不可行

【1】table + margin負(fù)值

CSS Code復(fù)制內(nèi)容到剪貼板

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復(fù)制內(nèi)容到剪貼板

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>

【2】table + 兄弟選擇器

CSS Code復(fù)制內(nèi)容到剪貼板

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復(fù)制內(nèi)容到剪貼板

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>

思路四: flex

CSS Code復(fù)制內(nèi)容到剪貼板

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復(fù)制內(nèi)容到剪貼板

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>

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com