CSS3에서 다중 열 레이아웃을 구현하는 방법은 무엇입니까

css3에서 다중 열 레이아웃을 구현하는 방법: 1. 부동 소수점을 사용하여 다중 열 레이아웃을 구현합니다. 2. 인라인 블록 상자 모델을 사용하여 다중 열 레이아웃을 구현합니다. 3. "display: flex" 탄성 레이아웃을 사용하여 구현합니다. 4. 다중 열 레이아웃을 사용합니다. "display: table" 메소드를 사용하여 다중 열 레이아웃을 구현합니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS로 다중 열 레이아웃을 구현하는 여러 가지 방법

아래 세 개의 div가 같은 줄에 표시되는 경우

<div id="parent">
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
</div>

1 : 플로트는 많은 구현 열 레이아웃

float 속성은 대상 HTML 구성 요소가 부동하는지 여부와 방법을 제어합니다. 이 속성을 설정하면 객체는 블록 구성요소로 처리됩니다. 네 가지 부동 소수점 값이 있습니다: left(왼쪽으로 부동), Right(오른쪽으로 부동), 없음(부동이 아님), 상속(상위 요소의 값 상속). box1, box2 및 box3을 부동으로 설정합니다. 부동 요소의 다음 형제 요소도 동일한 부동 방향으로 설정되면 새 요소 바로 뒤에 표시됩니다.

float를 설정하면 요소가 일반적인 문서 흐름에서 벗어나게 됩니다. 해당 부모 요소는 늘어나지 않으므로 현재 #parent의 높이는 0입니다.

    #parent>div{
        border:1px solid black;
        float:left;
        width:200px;
        height:200px;
        text-align: center;
 
    }
   #box1{
       background-color:red;
   }
   #box2{
       background-color:yellow;
   }
    #box3 {
        background-color:blue;
    }

box1과 box2는 왼쪽으로 뜨고 box3은 뜨지 않도록 설정할 수도 있습니다. box1과 box2는 float로 설정되어 있으므로 일반적인 문서 흐름과 분리됩니다. box3의 경우 앞에는 box1과 box2가 없는 것처럼 보입니다. Box3도 이 줄에 표시되지만 box1에 의해 차단됩니다. box3의 margin-left:400px를 설정하면 box1과 box2 뒤에 표시되는 것처럼 보일 수 있습니다. 이때 #parent는 box3에 의해 열리며, 높이는 이제 202px입니다.

    #parent>div{
        border:1px solid black;
        width:200px;
        height:200px;
        text-align: center;
 
    }
    #box1{
       float:left;
        background-color:red;
    }
    #box2{
        float:left;
        background-color:yellow;
    }
    #box3 {
        margin-left:400px;
        background-color:blue;
    }

2: 인라인 블록 박스 모델

인라인 블록 박스 모델의 요소는 한 줄을 차지하지 않으며 너비와 높이를 너비와 높이로 지정하는 것도 지원합니다. display:inline-block은 객체를 인라인 객체로 렌더링하지만 객체의 내용은 블록 객체로 렌더링됩니다. 후속 인라인 개체는 같은 줄에 정렬됩니다. 일반적으로 상단을 정렬하려면 Vertical-align:top을 설정해야 합니다.

    #parent>div{
        display:inline-block;
        border:1px solid black;
        width:200px;
        height:200px;
        text-align: center;
    }
    #box1{
        background-color:red;
    }
    #box2{
        background-color:yellow;
    }
    #box3 {
        background-color:blue;
    }

인라인 블록 줄 바꿈이나 공백으로 구분하여 표시할 때 가로로 표시되는 요소 사이에 간격이 있습니다. 공백을 제거하면 자연스럽게 공백이 사라져 공백이 표시되지 않습니다.

<div id="parent">
    <div id="box1">1</div><div id="box2">2</div><div id="box3">3</div>
</div>

3: display: flex 유연한 레이아웃

#부모 컨테이너의 diaplay:flex를 설정합니다. 부모 컨테이너는 유연한 상자와 동일합니다. 내부의 div는 flex-direction에 의해 설정된 패턴에 따라 배열됩니다. Flex 유연한 레이아웃의 기능은 상대적으로 강력하여 박스 모델이 복잡한 레이아웃을 구현할 수 있도록 최대의 유연성을 제공할 수 있습니다. flex-direction 속성은 기본 축의 방향을 결정합니다. flex-direction: row; 는 상위 컨테이너의 가로 배열을 의미하고 flex-direction: columns 는 상위 컨테이너의 세로 배열을 의미합니다.

    #parent{
        display: flex;
        flex-direction: row;
    }
    #parent>div{
        border:1px solid black;
        width:200px;
        height:200px;
        text-align: center;
    }
    #box1{
        background-color:red;
    }
    #box2{
        background-color:yellow;
    }
    #box3 {
        background-color:blue;
    }

4: display: table

display:table 이 속성이 설정된 요소는

#parent{
        display: table;
    }
    #parent>div{
        display:table-cell;
        border:1px solid black;
        width:200px;
        height:200px;
        text-align: center;
    }
    #box1{
        background-color:red;
    }
    #box2{
        background-color:yellow;
    }
    #box3 {
        background-color:blue;
    }