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

这篇文章主要为大家详细介绍了CSS实现等分布局的4种方式，等分布局是指子元素平均分配父元素宽度的布局方式，本文将介绍实现等分布局的4种方式，感兴趣的小伙伴们可以参考一下

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

思路一: float

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

【1】float + padding + background-clip

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

CSS Code复制内容到剪贴板

1.   

2.   

XML/HTML Code复制内容到剪贴板

1. <p class="parentWrap">  

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

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

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

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

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

7.     p>       

8. p>  

9.   

【2】float + margin + calc

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

CSS Code复制内容到剪贴板

1.   

XML/HTML Code复制内容到剪贴板

1. <p class="parentWrap">  

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

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

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

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

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

7.     p>       

8. p>  

9.   

【3】float + margin + (fix)

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

CSS Code复制内容到剪贴板

1.   

2.   

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

5.         p>  

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

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

8.         p>  

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

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

11.         p>  

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

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

14.         p>                   

15.     p>       

16. p>  

17.   

思路二: inline-block

缺点：需要设置垂直对齐方式vertical-align，则需要处理换行符解析成空格的间隙问题。IE7-浏览器不支持给块级元素设置inline-block属性，兼容代码是display:inline;zoom:1;

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

CSS Code复制内容到剪贴板

1.   

2.   

XML/HTML Code复制内容到剪贴板

1. <p class="parentWrap">  

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

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

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

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

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

7.     p>       

8. p>  

9.   

【2】inline-block + margin + calc

CSS Code复制内容到剪贴板

1.   

2.   

XML/HTML Code复制内容到剪贴板

1. <p class="parentWrap">  

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

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

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

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

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

7.     p>       

8. p>  

9.   

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

CSS Code复制内容到剪贴板

1.   

2.   

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

5.         p>  

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

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

8.         p>  

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

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

11.         p>  

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

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

14.         p>                   

15.     p>       

16. p>  

17.   

思路三: table

缺点：元素被设置为table后，内容撑开宽度。若要兼容IE7-浏览器，需要改为

结构。table-cell元素无法设置margin，设置padding及background-clip也不可行

【1】table + margin负值

CSS Code复制内容到剪贴板

1.   

2.   

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

5.         p>  

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

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

8.         p>  

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

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

11.         p>  

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

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

14.         p>                   

15.     p>       

16. p>  

17.   

【2】table + 兄弟选择器

CSS Code复制内容到剪贴板

1.   

2.   

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

4.     p>  

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

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

7.     p>  

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

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

10.     p>  

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

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

13.     p>                   

14. p>       

15.   

思路四: flex

CSS Code复制内容到剪贴板

1.   

2.   

XML/HTML Code复制内容到剪贴板

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

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

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

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

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

6. p>     

7.   

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

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

Atas ialah kandungan terperinci CSS实现等分布局的4种方式. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：CSS3教程：background-clip和background-originArtikel seterusnya：Android Layout 布局属性全解

Artikel berkaitan

Lihat lagi

• Bagaimana Menukar RGB kepada RGBA dengan Ketelusan Berdasarkan Komponen Warna Terendah?
• Cara Menukar Warna Butang pada Hover: Apa Yang Salah dan Bagaimana untuk Membetulkannya?
• Mari jadikan web responsif dengan hanya satu baris pemasangan? Saya sedang mencari penyumbang!
• Bagaimana untuk Membuat Ketinggian DIV Berkembang dengan Kandungannya?
• Bagaimana untuk mencapai kelegapan yang berbeza untuk elemen latar belakang dan teks dalam CSS?

• Rumah

• Kursus

• Soal Jawab

• saya

• Rumah
• Kursus
• Artikel
• Soal Jawab
• Kamus
• Manual
• Muat turun
• Topik

Rumah

Artikel

Soal Jawab

Kursus

Topik

Muat turun

Permainan

Kamus

简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）