CSS로 균등 분배를 달성하는 4가지 방법

이 글에서는 CSS에서 균등 분배를 달성하는 4가지 방법을 주로 소개합니다. 균등 분배는 하위 요소가 상위 요소의 너비를 균등하게 분배하는 레이아웃 방법을 의미합니다. 이 글에서는 관심 있는 친구를 균등하게 분배하는 4가지 방법을 소개합니다.

균등 분배는 하위 요소가 상위 요소의 너비를 균등하게 분배하는 레이아웃 방법을 나타냅니다. 이 기사에서는 균등 분배를 달성하는 4가지 방법을 소개합니다.

아이디어 1: float

단점: 구조 및 스타일 결합되어 있으며 IE7-browser

【1】float + padding + Background-clip

패딩을 사용하여 하위 요소 사이의 간격을 확보하려면 너비 백분율 값에 반올림 오류가 있습니다. 하위 요소의 패딩 부분이 배경을 표시하지 않도록 하는 background-clip

CSS 코드콘텐츠를 클립보드에 복사하세요

2. XML/ HTML 코드
3. 클립보드에 콘텐츠 복사
   < p
4. class

   =

   "parentWrap"
5. >

6. < p class

   =
"아이"

7. style="배경색: "lightblue;">1

p

>

8. ㅋㅋ             

p

9. >                                             > <p class="child" style="배경- 색상: 핑크;">4

   < ;/
10. p

    > ;                                                       > 【3】 float + margin + (fix) ) 하위 요소 간의 간격을 달성하기 위해 마진을 사용하고 Clipboards & lt; Style & gt; p{margin: 0;}

11. .parentWrap{

    overflow: hidden } .parent{ overflow

    :
숨김 #

12. 너비: 25%; }

    .in{

13. margin-right: 20px

14. height

    :
100px

;

)

<p class

=

"parentWrap"

>

<

p

1. class

   =

   "parent"
2. style

   ="배경색: lightgrey;" >

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

4.             <p 수업 ="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="배경색: 주황색;" >  

10. ㅋㅋㅋ

    >           p>          <p 

    class
=
11. "child"

     style="배경색: 빨간색;"> ;  

12.             

    <p class="in" style="Background-color: 핑크;">4

p

13. >          p>                     p >

           

14. p>

      

15.   

16. 思路二: 인라인 블록

    단점: 수직 정렬 vertical-align을 설정해야 하며 줄 바꿈 문자가 공백으로 구문 분석되는 간격 문제를 처리해야 합니다. IE7 브라우저는 블록 수준 요소에 대한 inline-block 속성 설정을 지원하지 않습니다. 호환되는 코드는 display:inline;zoom:1;

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

    입니다.
    

    CSS 코드클립보드에 콘텐츠 복사

    2. XML/HTML 코드콘텐츠를 클립보드에 복사

    3. <p class

       =
    "parentWrap"

    4. >

    <

    6. p

    class
    =

    "부모"
    

    스타일

    =" 배경색: 밝은 회색;">

1. 바탕색: 연한 파란색;" >1p>

2. style = "배경색: 연녹색;">2p>

style
3. =

   "배경색: 조명연어 ;">3 p> ㅋㅋ                                     

4. >

   p> p>

5. 【 2】inline-block + margin + calc

6. CSS Code

   클립보드에 콘텐츠 복사

ML/HTML 코드

콘텐츠를 클립보드에 복사

8. <

   p
9. class

   ="parentWrap ">

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

    >

11. >1

    < /
12. p
    >

14. >

    2
< ;/

p

>

ㅋㅋ +                                   

p

> + 【3】인라인 블록 + 여백 + (수정) CSS 코드클립보드에 콘텐츠 복사

XML/HTML Code

클립보드에 콘텐츠 복사

<p

class
1. =

   "parentWrap"> <p

class
2. =

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

3.                                                                      > p> "child"

   style
=
4. " 배경색: 녹색;"

   > >2 p> class="child" style=

   "배경- 색깔 : 오렌지;"
5. >

   ㅋㅋ > >

6. 4p > ; p> p>

    

7. p >

8. 【2】테이블 + 형제 선택기

9. CSS Code클립보드에 콘텐츠 복사 몸,p{margin: 0;} .parent{

10. display

    : 테이블 width: 100%

11. table -layout: 수정됨;

}

12. .child{

13. height

    :

    100px
}

.child + .child{

padding-left

:
20px

;

2. XML/HTML Code

   클립보드에 콘텐츠 복사

p

4. class="부모님"

style
5. =

   "배경색: 밝은 회색;" >

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

8.     p>  

9.     <p class="child" style="배경색: 녹색;" >  

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

11.     p>  

12.     <p class ="child" style="배경색 : orange;">  

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

14.     p>  

15.     <p  class="자식" style= "배경색: 빨간색;">  

16.         <p class="in" style="배경색: 분홍색;" > ;4p>  

17.     p>                  

18. p>       

19. ㅋㅋㅋ
    <스타일>   

body,p{

margin

: 0;}   

.parent{   

    display: flex;   

1. }   

2. .child{   
       flex:1;   

3.     
height
4. : 

   100px;   

5. }   

6. .child + .child{   

7.     margin-left: 20px;   

8. }   

9.   

10.   

XML/HTML 코드复제内容到剪贴板

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

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

3.     <p class="child" style="배경 색상: 연녹색 ;"> 2p>  

4.     <p class="child" style="배경색 : lightsalmon;"> ;3p>  

5.     <p class="child" style="배경 색상: 핑크;" >4p>                 

6. p>     

7.   

 以上就是本文的전체부内容,希望对大家의 school习有所帮助。

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

위 내용은 CSS로 균등 분배를 달성하는 4가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!