CSS에서 3열 레이아웃을 구현하는 방법

구현 방법:

1.Float float

<section class=&#39;layout float&#39;>
         <style>
             .layout.float .left-right-center{
                 height: 100px;
             }
             .layout.float .left{
                 float: left;
                 width: 300px;
                 background-color: red;
             }

             .layout.float .right{
                 float: right;
                 width: 300px;
                 background-color: blue;
             }

             .layout.float .center{
                 background-color: yellow;
             }
         </style>
         <article class="left-right-center">
             <div class="left"></div>
             <div class="right"></div>
             <div class="center">我是中间的自适应元素--浮动</div>
         </article>
     </section>

원리: 왼쪽과 오른쪽 div가 문서 흐름에서 벗어나 있으므로 가운데가 위로 이동하여 3열 레이아웃 효과가 발생합니다(제공됨). 높이가 같다는 것)

장점 : 호환성이 높다

단점 : 다른 요소에 영향을 주지 않도록 플로트를 지워야 함

높이가 고정되지 않으면 가운데에 있는 내용이 늘어나서 왼쪽과 오른쪽이 늘어나게 됩니다. 측면은 함께 늘어나지 않습니다

(추천 튜토리얼: CSS 튜토리얼)

2. 절대 위치 지정

<section class="layout absolute">
         <style>
             .layout.absolute .left-center-right div{
                 position: absolute;
                 height: 100px;
             }

             .layout.absolute .left{
                 left: 0;
                 width: 300px;
                 background-color: red;
             }

             .layout.absolute .center{
                 left: 300px;
                 right: 300px;
                 background-color: yellow;
             }

             .layout.absolute .right{
                 right: 0;
                 width: 300px;
                 background-color: blue;
             }
         </style>
         <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                我是中间的自适应元素--绝对定位
            </div>
            <div class="right"></div>
         </article>
     </section>

원리: 절대 위치 지정과 너비를 사용하여 왼쪽과 오른쪽의 div와 가운데 너비를 고정합니다. div는 적응 효과를 갖습니다

장점: 빠르다

단점: 상위 요소가 문서 흐름에서 분리되면 하위 요소가 문서 흐름에서 확실히 벗어나고 응용 시나리오가 많지 않습니다

높이가 가운데 요소의 높이가 증가하면 양쪽 요소의 높이가 증가하지 않으므로 가운데 div만 늘어납니다

3. Flex 레이아웃

<section class="layout flex">
         <style>
             .layout.flex .left-center-right{
                 display: flex;
                 height: 100px;
             }

             .layout.flex .left{
                 width: 300px;
                 background-color: red;
             }

             .layout.flex .center{
                 flex: 1;
                 background-color: yellow;
             }

             .layout.flex .right{
                 width: 300px;
                 background-color: blue;
             }
         </style>
         <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                我是中间的自适应元素--flex布局
            </div>
            <div class="right"></div>
         </article>
     </section>

원리: 상위 요소를 flex 레이아웃으로 설정한 다음 flex를 다음으로 설정합니다. 1 중간 요소는 적응 효과를 얻습니다

장점: 실제 개발에서 흔히 사용됩니다

단점: IE8 이하 브라우저에서는 지원하지 않습니다

높이가 고정되지 않으면 중간 콘텐츠의 높이가 확장된 후, 그에 따라 양면도 확장됩니다

4. 테이블 레이아웃

   <section class="layout table">
        <style>
            .layout.table .left-center-right{
                display: table;
                height: 100px;
                width: 100%;
            }

            .layout.table .left{
                display: table-cell;
                width: 300px;
                background-color: red;
            }

            .layout.table .center{
                display: table-cell;
                background-color: yellow;
            }

            .layout.table .right{
                display: table-cell;
                width: 300px;
                background-color: blue;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                我是中间的自适应元素--table
            </div>
            <div class="right"></div>
        </article>
    </section>

원리: 상위 요소를 테이블 레이아웃으로 설정한 다음 각 하위 요소는 테블 셀이고 왼쪽 및 오른쪽 그리드를 고정 너비로 ​​설정합니다. 중간 그리드는 적응 효과를 얻을 수 있습니다

장점: 호환성이 좋으며 IE8 이하의 플렉스 레이아웃을 대체하여 사용할 수 있습니다

단점: 제한 사항

높이가 고정되지 않으면 가운데가 늘어날 때 왼쪽과 오른쪽이 flex

5와 비슷하게 측면도 늘어납니다. 그리드 레이아웃

<section class="layout grid">
        <style>
            .layout.grid .left-center-right{
                display: grid;
                width: 100%;
                grid-template-rows: 100px;/*每一格都是100px高*/
                grid-template-columns: 300px auto 300px;/*左右两格都是300px，中间是自适应*/
            }
            
            .layout.grid .left{
                background-color: red;
            }

            .layout.grid .center{
                background-color: yellow;
            }

            .layout.grid .right{
                background-color: blue;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                我是中间的自适应元素--grid布局
            </div>
            <div class="right"></div>
        </article>
    </section>

원리: 상위 요소를 그리드 레이아웃으로 설정한 다음 각 그리드의 높이와 너비를 지정하고 각 그리드에 별도로 지정하세요. 색상만 별도로 설정하세요

장점: 기술이 비교적 새롭고 편리합니다.

단점: 호환성이 그다지 좋지 않습니다.

높이가 고정되어 있지 않으면 중간 요소에 텍스트를 추가해도 늘어나지 않습니다.

추천 관련 비디오 튜토리얼: css 비디오 튜토리얼

위 내용은 CSS에서 3열 레이아웃을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!