CSS實現等分佈局的4種方式

這篇文章主要為大家詳細介紹了CSS實作等分佈局的4種方式，等分佈局是指子元素平均分配父元素寬度的佈局方式，本文將介紹實現等分佈局的4種方式，有興趣的夥伴們可以參考一下

等分佈局是指子元素平均分配父元素寬度的佈局方式，本文將介紹實現等分佈局的4種方式

#思路一: float

缺點:結構與樣式存在耦合性，IE7-瀏覽器下對寬度百分比取值存在四捨五入的誤差

##【 1】float + padding + background-clip

使用padding來實現子元素之間的間距，使用background-clip使子元素padding部分不顯示背景

CSS Code複製內容到剪貼簿

1.   
     

2. #   #  #XML/HTML Code複製內容到剪貼簿

3. #<p class="parentWrap">

4. ######################################## # ############    ###<#######p### ###class###=###"parent"### ###style## #=###"###background-color###: lightgrey;"######>###  ############        ###<lt;####        ###<lt;####<lt;### ###p### ###class###=###"child"### ###style###=###"background-color: lightblue;"#######> ;###1######  ############        ####<#####        ####<##### ##p### ###class###=###"child"### ###style###=###"background-color: lightgreen;"######> ###2######  ####

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

>
6. 3

   p>          <p class="child" style=

   #=
"child"
7.  

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

p

8. >         #   #        #  #    p

>
9.        

##p>  

#  

#【2】float + margin + calc

1. 使用margin實作子元素之間的間距，使用calc ()函數計算子元素的寬度

2. CSS Code

複製內容到剪貼簿
4.   ##  

5. XML/HTML Code複製內容到剪貼簿 <p class

   =
"parentWrap"

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

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

7.         <p class="child" style=##class#"child" style=##class#=##"child" style="background-color: lightgreen;"

>
8. 2

   p>          <p class="child" style=

   #=
"child"
9.  

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

   =
"child"
10.  

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

p

11. >                p

#>
12.        

##

p

>

  
#  

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

#使用margin實作子元素之間的間距，透過增加結構來實現相容

6. #CSS Code

複製內容到剪貼簿

7.   ####### #######  #########################XML/HTML Code######複製內容到剪貼簿##### ##############<######p### ###class###=###"parentWrap"######>## #  ############    ###<######p### ###class###=###"parent"### ###style# ##=###"background-color: lightgrey;"######>###  #####

8. ##        

   #p #="child"# style#="背景顏色：藍色；">  

9. #           應

   #p#  #class ##="in" style="背景顏色：淺藍色;">1p>  

#        

10. ##p>

        
11. #p #class="child" 樣式="背景顏色：綠色；">  
            

12. #p#o##p #class="in" style="背景顏色：淺綠色；"> ;2p>  

    #        

13. #p#>  

            

p class#= "child" style="背景顏色：橘色；">  

#            ##"p ##class

="in" style="背景顏色：淺鮭魚色;"##>3 p>  ###p

>#  

14.         <p 

    #class
=
15. "child"

     style="背景顏色：紅;"##>              < #class

    =
"in"
16.  

    style#= "背景顏色：粉紅色；"##>4p>           #p# >                  

17.     < /# ## #

    p
18. >

        

####### ##################思路二：內嵌區塊######

缺點：需要設定垂直對齊方式vertical-align，則需要處理換行符號解析成空格的間隙問題。 IE7-瀏覽器不支援為區塊級元素設定inline-block屬性，相容程式碼是display:inline;zoom:1;

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

CSS Code複製內容到剪貼簿

1.   

   ######  #########################XML/HTML Code# #####複製內容到剪貼簿##################<######p### ###class###=## #"parentWrap"######>###  #############    ###<######p### ###class###= ###"parent"### ###style###=###"background-color: lightgrey;"######>###  ############ #        ###<######p### ###class###=###"child"### ###style###=###"background-color: lightblue ;"######>###1######  ########################################################################################## ###<######p### ###class###=###"child"### ###style###=###"background-color: lightgreen; 「######>###2######  ############        ######        # ##<######p### ###class###=###"child"### ###style###=###"background-color: lightsalmon;" ######>###3######  ###
2. ##        

   #p #="child"# style#="背景顏色：粉紅色；">4p>                 或    

3. p

   >#       

   ##
4. p

   >    

#【2】inline-block + margin + calc

4. CSS程式碼

   複製內容到剪貼簿
  
body,p{
7. margin

   : 0;}   .parentWrap{   

8. #    溢位：

   隱藏
；   
}   
.parent{   

11.     margin-right： -20px；   

12.     字體大小：0；   

}   

13. .child{   

    
14. 顯示

    : ##    顯示#: 

    內嵌
-
15. 區塊

    ；   ##    vertical-align

    : 
top
16. ;   

    ##    字體大小：

    16px
；   
    
18. 高

    ：

    100px
；   

19. ##    
width

: calc(25% - 

20px
);   

    margin-right: 

20px

;   

1. }   樣式>     

2. XML/HTML 程式碼 將內容複製到剪貼簿p

    
class
3. =

   "parentWrap"

4. >      <p class="父級" 樣式=

   "背景顏色：淺灰色;"######>###  ############        ###<#######<#####        ###<#######<### # ##p### ###class##=###"child"### ###style###=###"背景顏色：淺藍色;"######> ; ###1######  ############        ###<#######p# ## ###class###=###"child"### ###style###=###"背景顏色：淺綠色；"######> ###2# #####  ####
5. ##        

   <#p #="child"# style#=“背景顏色：淺鮭魚色；”>3#p>  

6.         

   <p class="child" style="背景顏色: 粉紅色;">4p>                   

7. > ##p>       

8. ###p>  
     

9. # 
##【3】 inline-block + margin + (fix)

##CSS程式碼

#複製內容到剪貼簿

<風格>   

1. body,p{

   margin
: 0;}   

2. .parentWrap{   

3. #    

   溢位
：
4. 隱藏

   ；   }   

5. .parent{   

6.     

   margin-right
： -
7. 20px

   ;       

   字體大小
：0；   

8. }   

9. .child{   

10.     

    顯示
: 

11. ##    顯示#: 內嵌-區塊；   

12. ##    

    vertical-align: top;   

##    
13. 字體大小

    ：16px；   

    ##    
寬度
14. ：25%；   
    }   

15. .in{   

16.     
margin-right
17. ：

    20px；   

        
高
18. ：

    100px；   

    }   

19.   

20.   

XML/HTML 程式碼

將內容複製到剪貼簿板

<

1. p class="parentWrap"

# #>
3.   

       <p# class#="父級" 樣式="背景顏色：淺灰色;"

   ###>###  ############        ####<######        ####<### ###p### ###class##=###"child"### ###style###=###"背景顏色：藍色;"######> ; ###  ####
4. ##            

   <p class="in" #="in" #= 「背景顏色：淺藍；」>

   1

p>  

        #

p>  ##p ## class="child" style=

"背景顏色：綠色；"
5. >

                 <p class#"in" ##stylestyle#class#"in"##style#class

   #"in"
##style

6. #class"in"##style#class

   "in"
##style

7. ##class"in"##style#class"in"##style##class"in"##style

   #class
8. 'in"

   "背景顏色：淺綠色；">2#p >          p>  

9. #      ##p class="child" style

   =
"背景顏色: 橘色;"

10. >              

p class= "in"
# class
11. =

    #="背景顏色：淺鮭魚色；"##>3#p>          #p>

12.         ##p

     class#="child" style=

    "背景顏色：紅色；"
13. >

                  

    p
 
14. class

    ="in" class=

    ##=
"背景顏色：粉紅色；"

15. >

    4

p

>

#  

        p

>

             


p######>###       ##### ################p#######>## #  ############  ####### ################想法三：表格########缺點：元素設定為表格後，內容撐開寬度。 #######【1】table + margin負值## #################

CSS Code複製內容到剪貼簿

1. #   

     

   2. ##XML/HTML Code複製內容到剪貼簿##<

      p
    
   3. class

      ="parentWrap">      < p class=

      "parent"
    
   4. style

      ="background-color: lightgrey;"#> ;          <p #class="child" 

   6. #'' #style="background-color: blue;">              <p class

      =
   "in"
   7.  

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

      #> #p
   8. >；

                 #"child" 

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

      >        ##<p class="in" style

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

   10.             <p class##"in"#stylestyle ##"background-color: lightsalmon;">3p>  

           
   11. p>  
      |
   12. ##p

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

       <
   13. p

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

   14. p

       #>         p

   #>
   15.        

       #

   16. < #p>  

     

   

   
   

   
   

   #【2】table + 兄弟選擇器

   4. #CSS Code

      ##複製內容到剪貼簿

   5.     

      ###################################################################################### #####XML/HTML Code######複製內容到剪貼簿##################<######p### ###class###=###"parent"### ###style###=###"background-color: lightgrey;"######>###  ### #########    ###<######p### ###class###=###"child"### ###style###=# ##"background-color: blue;"######>###  ####
   6. ##        

      # class="in" style#= 「背景顏色：淺藍；」>1p>  

   7.     

      p>  

   8.     

      p class="child" style="背景顏色：綠色；">  

   9. ##        

      #p #="in"style="背景顏色：淺綠色；">2p >  

   10.     

       p#>  

   11.     

       ##     p# class="child" style=

       "背景顏色: 橘色;"
   12. >

       #        ##p #class= "in" styleclass##= "in" style="背景顏色：淺鮭魚色；"

       ##>
   3

   13. #p>  

       

   14. p#>     #p class=

       "child"
    
   15. style

       ="背景顏色：紅色；">          p class="in" style##="in"

       #=
   "背景顏色：粉紅色；"

   16. >4p>

       ##  

   17. #    p>

                        
   18. p
       >
          

   

     

   
   

   3. #思路四：flex

   4. #CSS程式碼
   5. 複製內容到剪貼簿

   6. #   

   7. body,p{

      margin
   : 0;}   

   8. .parent{   

   #    
   9. 顯示

      ：伸縮；   

   10. }   

       #########.child{   ############    flex:1;   ############    ###高###：###100px###；   ############}   ############.child + .child{   #######################################################.
   11. ##    

       margin-left: 20px;   

   12. }   

   13. 樣式>   

   14.   

   
   

   XML/HTML 程式碼 將內容複製到剪貼簿

   1. p class="parent" style="背景顏色：淺灰色;">  

   2.     

      #p  class="child" style="背景顏色：淺藍色;"> 1p>  

   3.     

      ## p class="child" style="背景顏色：淺綠色；">2p>  

   4. #    

      ##p  class="child" style="背景顏色：淺鮭魚色；"> 3 p>  

       
   5. p ##class="child" style="背景顏色：粉紅色；">4 p >                   
   6. #

      # #  

   7. # # 以上就是本文的全部內容，希望對大家的學習有所幫助。 #本文連結：http://www.cnblogs.com/xiaohuochai/p/5456695.html

   以上是CSS實現等分佈局的4種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！