4 ways to achieve equal distribution with CSS

This article mainly introduces in detail the 4 ways to achieve equal distribution in CSS. Equal distribution refers to a layout method in which child elements evenly distribute the width of the parent element. This article will introduce the 4 ways to achieve equal distribution. Interested friends can refer to

Equal distribution refers to a layout method in which child elements evenly distribute the width of parent elements. This article will introduce 4 ways to achieve equal distribution

Idea 1: float

Disadvantages: There is coupling between structure and style, and there is a rounding error in the width percentage value under IE7-browser

【 1】float + padding + background-clip

Use padding to achieve the spacing between sub-elements, and use background-clip to make the padding part of the sub-element not display the background

CSS CodeCopy content to clipboard

1. ##

XML/HTML Code

Copy content to clipboard

##<

1. p class="parentWrap"> ##​ <

2. p

   class="parent" style="background-color: lightgrey;"> ##                                                          p class

3. =

   "child" style="background-color: lightblue;"> ;1p> ##                   <p

   class
=
4. "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>

##【2】float + margin + calc

Use margin to achieve spacing between sub-elements, use calc () function calculates the width of the child element

CSS Code

Copy content to the clipboard

XML/HTML Code

Copy content to clipboard

<

p

1. class="parentWrap"> ##<

   p
2. class

   ="parent" style="background-color: lightgrey;" > ##          <p

class
3. =

   " 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>                                                        #p>

9. ##【3】float + margin + (fix)

Use margin to achieve spacing between sub-elements, and achieve compatibility by adding structure

CSS Code

Copy content to clipboard




11. XML/HTML Code

Copy content to clipboard

##<

p

class="parentWrap">

1. ##<p class="parent" style=

   "background-color: lightgrey;"
2. >

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

Disadvantages: You need to set the vertical alignment vertical-align, and you need to deal with the gap problem of newline characters being parsed into spaces. IE7-The browser does not support setting the inline-block attribute for block-level elements. The compatible code is display:inline;zoom:1;

[1]inline-block + padding + background- clip

##CSS CodeCopy content to clipboard

##XML/HTML Code

Copy content to clipboard

<

p

1. class="parentWrap"> <

p

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

p

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

   p
4. class

   ="child" style="background-color: lightgreen; ">2p> #<p

class
5. =

   "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 CodeCopy content to clipboard

##XML/HTML Code


Copy content to clipboard

##<

p

1. class="parentWrap"> ##<

   p
2. class

   ="parent" style="background-color: lightgrey;"> ;         <

   p
3. class

   ="child" style="background-color: blue;"> ##                                                          #p class=

   "in"
4. style

   ="background-color: lightblue;">1p> ##                                                    #p> ##                                        #"child"

   style
=
5. "background-color: green;"

   > #<

p

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

7. ##          p> ##                                                            ##class="child" style="background-color: orange;">

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

9.                                                                                                                 ##p class="child"

   style
=
10. "background-color: red;"

    >                                                                                style="background-color: pink;">4p >       

11. p

    >                                                           #p> 【2】table + sibling selector

12. ##CSS CodeCopy content to clipboard

#

15. XML/HTML CodeCopy content to clipboard

16. ##<p

    class
=
17. "parent"
    style
=
18. "background-color: lightgrey;"
    >

19. ​ <p

    class
=
20. "child"
    style
=
21. "background-color: blue;"
    >

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

24.     p>  

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

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

27.     p>  

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

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

30.     p>  

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

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

33.     p>                   

34. p>       

35.   



思路四: 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

The above is the detailed content of 4 ways to achieve equal distribution with CSS. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS3 tutorial: background-clip and background-originNext article：CSS3 tutorial: background-clip and background-origin

Related articles

See more

• Summary of what you must pay attention to about Border when writing CSS
• How to realize multi-style selection and real-time switching of styles_Experience exchange
• Detailed usage analysis of marquee
• CSS标题线（删除线贯穿线效果）实现
• CSS3中优雅降级和渐进增强的区别


Public welfare online PHP training，Help PHP learners grow quickly！

About usDisclaimerSitemap

© php.cn All rights reserved