搜尋

首頁 >web前端 >css教學 >CSS實現等分佈局的4種方式

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

巴扎黑
巴扎黑原創
2017-06-28 11:00:132450瀏覽

這篇文章主要為大家詳細介紹了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. >
  6. 3

    p>          <p class="child" style=

    #=
    7. "child"
  7.  

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

    8. p

  8. >         #   #        #  #    p

    9. >

  9.        

##p>  

#  


#【2】float + margin + calc

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

  2. CSS Code

    3. 複製內容到剪貼簿

  4.   ##  

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

    =
    6. "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. >
  8. 2

    p>          <p class="child" style=

    #=
    9. "child"
  9.  

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

    =
    10. "child"
  10.  

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

    11. p

  11. >                p

    12. #>

  12.        

##


p

>

      

    2. #  

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

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

  6. #CSS Code

    7. 複製內容到剪貼簿

  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. #        

  10. ##p>

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

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

    #        

  13. #p#>  

            

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

    #            ##"p ##class

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

    >#  

  14.         <p 

    #class
    15. =
  15. "child"

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

    =
    16. "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

    >    


    3. #【2】inline-block + margin + calc

  4. CSS程式碼

    複製內容到剪貼簿

    6.   

    7. body,p{
  7. margin

    : 0;}   .parentWrap{   

  8. #    溢位：

    隱藏
    9. ；   

    10. }   

    11. .parent{   

  11.     margin-right： -20px；   

  12.     字體大小：0；   

    13. }   

  13. .child{   

    14.     
  14. 顯示

    : ##    顯示#: 

    內嵌
    15. -
  15. 區塊

    ；   ##    vertical-align

    : 
    16. top
  16. ;   

    ##    字體大小：

    16px
    17. ；   

    18.     
  18. 高

    ：

    100px
    19. ；   

  19. ##    
    20. width
: calc(25% - 

20px
);   

    margin-right: 

20px
    ;   

  1. }   樣式>     

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

     
    3. 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. # 
    10. ##【3】 inline-block + margin + (fix)

##CSS程式碼

#複製內容到剪貼簿

<風格>   

  1. body,p{

    margin
    2. : 0;}   

  2. .parentWrap{   

  3. #    

    溢位
    4. ：
  4. 隱藏

    ；   }   

  5. .parent{   

  6.     

    margin-right
    7. ： -
  7. 20px

    ;       

    字體大小
    8. ：0；   

  8. }   

  9. .child{   

  10.     

    顯示
    11. : 

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

  12. ##    

    vertical-align: top;   

    13. ##    
  13. 字體大小

    ：16px；   

    ##    
    14. 寬度
  14. ：25%；   

    }   

  15. .in{   

  16.     
    17. margin-right
  17. ：

    20px；   

        
    18. 高
  18. ：

    100px；   

    }   

  19.   

  20.   


XML/HTML 程式碼

將內容複製到剪貼簿板

    <

  1. p class="parentWrap"

    3. # #>
  3.   

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

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

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

    1

    5. p>  

            #

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

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

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

    #"in"
    6. ##style

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

    "in"
    7. ##style

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

    #class
  8. 'in"

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

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

    =
    10. "背景顏色: 橘色;"

  10. >              

    11. p class= "in"

    # class
  11. =

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

  12.         ##p

     class#="child" style=

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

                  

    p
    14.  
  14. class

    ="in" class=

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

  15. >

    4

    16. p

    >

    #  

            p

    >

                 

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

    CSS Code複製內容到剪貼簿

    1. #   

        

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

        p
        3.  
      3. class

        ="parentWrap">      < p class=

        "parent"
        4.  
      4. style

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

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

        =
        7. "in"
      7.  

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

        #> #p
      8. >；

                   #"child" 

        style
        9. =
      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.         
      11. p>  
        12.    |
      12. ##p

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

        <
      13. p

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

      14. p

        #>         p

        15. #>
      15.        

        #

      16. < #p>  

        17.   



        3. #【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="背景顏色：淺鮭魚色；"

        ##>
        13. 3

      13. #p>  

        14.     

      14. p#>     #p class=

        "child"
        15.  
      15. style

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

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

      16. >4p>

        ##  

      17. #    p>

                         
      18. p

        >
        19.        

        


      3. #思路四：flex

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

      6. #   

      7. body,p{

        margin
        8. : 0;}   

      8. .parent{   

        9. #    
      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.     
      5. p ##class="child" style="背景顏色：粉紅色；">4 p >                   
      6. #

        # #  

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

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

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：CSS3教學：background-clip和background-origin下一篇：CSS3教學：background-clip和background-origin

相關文章

看更多