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!

Label berkaitan：

css Cara

sumber：php.cn

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

Kenyataan Laman Web ini

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 terbaru oleh pengarang

• 如何给php数组添加元素
  2023-03-14 15:58:02
• 实例展示JS实现简单的选择题测评系统
  1970-01-01 08:00:00
• PHP限制相同IP多次提交的解决办法
  2023-03-15 07:38:01
• HTML中用正则表达式实现表格验证
  1970-01-01 08:00:00
• 有关JavaScript严格模式下this的指向问题详解
  1970-01-01 08:00:00
• Java构建树形菜单（包括多级菜单）的实例代码
  1970-01-01 08:00:00
• CSS3实现hover离开时平滑过渡的实例详解
  1970-01-01 08:00:00
• Swiper轮播图源码分享解析
  1970-01-01 08:00:00
• 总结整理VsCode插件
  1970-01-01 08:00:00
• HttpUtils请求工具类的代码
  1970-01-01 08:00:00

Isu terkini

Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus

daripada 2024-04-16 10:10:18

0

0

1335

Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...

daripada 2024-04-06 21:58:04

0

1

800

Ubah suai gaya CSS sebaris secara dinamik dalam Javafx Saya cuba menukar imej latar belakang anak tetingkap apabila aplikasi dimaksimumkan. Latar...

daripada 2024-04-06 20:57:16

0

1

487

Bagaimana untuk membuat elemen terapung disusun secara menegak dan bukannya secara mendatar dalam CSS? Saya cuba membuat halaman web dengan dua lajur, dengan kandungan utama di satu pihak dan k...

daripada 2024-04-06 20:45:26

0

2

386

Adakah terdapat cara untuk memaksa teks dalam flexbox dipusatkan secara menegak, tidak kira apa kod CSS lain yang kita ada? Saya mempunyai kod CSS berikut yang merupakan sebahagian daripada kod CSS yang lebih besar...

daripada 2024-04-06 20:41:51

0

1

518

Topik-topik yang berkaitan

Lagi>

• css
• berpusat css
• Bagaimana untuk memasukkan gambar dalam css
• css di luar paparan...
• warna fon css
• apa itu css
• Bagaimana untuk menulis segitiga dalam css
• css menetapkan warna teks

Cadangan popular

• Bagaimana untuk menetapkan css untuk melebihi elips paparan
• css怎么设置字体大小
• css中的hover怎么用
• Bagaimana untuk menetapkan jarak aksara dalam css
• css3新特性有哪些

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini

• 
  Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)

  1423606
• 
  Tutorial pengenalan PHP satu: Belajar PHP dalam satu minggu

  4269288
• 
  Tutorial Video Permulaan JAVA

  2540217
• 
  Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python

  507746
• 
  Tutorial pengenalan berasaskan sifar PHP

  863081

• 
  Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)

  1423606 kali belajar
• 
  Tutorial Video Permulaan JAVA

  2540217 kali belajar
• 
  Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python

  507746 kali belajar
• 
  Pengenalan pantas kepada pembangunan bahagian hadapan web

  215913 kali belajar
• 
  Kuasai tutorial video PS dari awal

  890762 kali belajar

• 
  [Web front-end] Permulaan pantas Node.js

  7518 kali belajar
• 
  Koleksi lengkap kursus timbunan penuh pembangunan web asing

  6016 kali belajar
• 
  Gunakan GraphQL praktikal bahasa

  4953 kali belajar
• 
  Master kipas 550W mempelajari JavaScript dari awal langkah demi langkah

  700 kali belajar
• 
  Sarjana Python Mosh, seorang pemula dengan pengetahuan asas sifar boleh bermula dalam masa 6 jam

  25121 kali belajar

Muat turun terkini

Lagi>

kesan web

Kod sumber laman web

Bahan laman web

Templat hujung hadapan

• [butang borang] kod hubungan borang mesej perusahaan jQuery
• [Kesan khas pemain] Kesan main balik kotak muzik MP3 HTML5
• [Navigasi menu] HTML5 kesan khas menu navigasi animasi zarah sejuk
• [butang borang] jQuery bentuk visual seret dan lepas kod penyuntingan
• [Kesan khas pemain] Kod pemain muzik Kugou tiruan VUE.JS
• [kesan khas html5] Permainan kotak menolak html5 klasik
• [Gambar kesan khas] menatal jQuery untuk menambah atau mengurangkan kesan imej
• [Kesan album foto] Kesan zum hover kulit album peribadi CSS3

• [Templat bahagian hadapan] Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah
• [Templat bahagian hadapan] Templat halaman panduan resume peribadi berwarna segar
• [Templat bahagian hadapan] Templat Web Resume Kerja Kreatif Pereka
• [Templat bahagian hadapan] Templat laman web syarikat pembinaan kejuruteraan moden
• [Templat bahagian hadapan] Templat HTML5 responsif untuk institusi perkhidmatan pendidikan
• [Templat bahagian hadapan] Templat laman web pusat membeli-belah kedai e-buku dalam talian
• [Templat bahagian hadapan] Teknologi IT menyelesaikan templat tapak web syarikat Internet
• [Templat bahagian hadapan] Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu

• [bahan PNG] Bahan vektor elemen musim panas yang comel (EPS+PNG)
• [bahan PNG] Empat bahan vektor lencana tamat pengajian 2023 merah (AI+EPS+PNG)
• [gambar sepanduk] Burung nyanyian dan troli diisi dengan bahan vektor sepanduk musim bunga reka bentuk bunga (AI+EPS)
• [bahan PNG] Bahan vektor topi pengijazahan emas (EPS+PNG)
• [bahan PNG] Bahan vektor ikon gunung gaya hitam putih (EPS+PNG)
• [bahan PNG] Bahan vektor siluet superhero (EPS+PNG) dengan jubah warna yang berbeza dan pose yang berbeza
• [gambar sepanduk] Bahan vektor sepanduk Hari Arbor gaya rata (AI+EPS)
• [bahan PNG] Sembilan bahan vektor buih sembang meletup gaya komik (EPS+PNG)

• [Templat bahagian hadapan] Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah
• [Templat bahagian hadapan] Templat halaman panduan resume peribadi berwarna segar
• [Templat bahagian hadapan] Templat Web Resume Kerja Kreatif Pereka
• [Templat bahagian hadapan] Templat laman web syarikat pembinaan kejuruteraan moden
• [Templat bahagian hadapan] Templat HTML5 responsif untuk institusi perkhidmatan pendidikan
• [Templat bahagian hadapan] Templat laman web pusat membeli-belah kedai e-buku dalam talian
• [Templat bahagian hadapan] Teknologi IT menyelesaikan templat tapak web syarikat Internet
• [Templat bahagian hadapan] Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu

Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

Tentang kita Penafian Sitemap

© php.cn All rights reserved