CSS로 3열 레이아웃을 구현하는 방법은 무엇입니까? 3열 레이아웃을 구현하는 3가지 방법(코드 예시)-CSS 튜토리얼-php.cn

CSS로 3열 레이아웃을 구현하는 방법은 무엇입니까? 3열 레이아웃을 구현하는 3가지 방법(코드 예시)

青灯夜游

풀어 주다： 2018-10-24 16:29:19

앞으로

8563명이 탐색했습니다.

이 글의 내용은 CSS로 3열 레이아웃을 구현하는 방법을 소개하는 것인가요? 3열 레이아웃을 구현하는 3가지 방법(코드 예시) 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

3열 레이아웃은 양쪽에 있는 두 열의 너비가 고정되어 있고 가운데 열의 너비는 조정 가능함을 의미합니다.

일반적으로 사용되는 세 가지 방법:

Positioning
Floating
유연한 상자 레이아웃

Positioning 방법

가장 직관적이고 이해하기 쉽습니다. 방법에서 절대 위치 지정을 선택합니다. 왼쪽 및 오른쪽 열, 페이지 양쪽에 고정, 중간 본문은 여백을 사용하여 위치를 결정하도록 선택

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>定位方法创建三列布局</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .left{
        width: 200px;
        height: 500px;
        background-color: yellow;
        position: absolute; /* 绝对定位，使位置固定 */
        left: 0;
        top: 0;
    }
    .center{
        height: 600px;
        background-color: purple;
        margin: 0 300px 0 200px;   /* 通过外边距确定宽度 */
    }
    .right{
        width: 300px;
        height: 500px;
        background-color: red;
        position: absolute; /* 绝对定位，使位置固定 */
        right: 0;
        top: 0;
    }

    </style>
</head>
<body>
    <div>Left</div>
    <div>Center</div>
    <div>Right</div>
</body>
</html>

로그인 후 복사

Result

Floating 방법

왼쪽과 오른쪽 부분을 띄우고 문서 흐름에서 벗어난 후 여백을 사용하여 중간 부분에 적응

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>浮动法创建三列布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .left{
        width: 200px;
        height: 500px;
        background-color: yellow;
        float: left;
    }
    .center{
        height: 600px;
        background-color: purple;
        margin: 0 300px 0 200px;
        min-width: 100px;  /* 最小宽度，防止浏览器缩小后中间部分被隐藏 */
    }
    .right{
        width: 300px;
        height: 500px;
        background-color: red;
        float: right;
    }
    </style>
</head>
<body>
    <div>Left</div>
    <div>Right</div>
    <div>Center</div>  <!-- 左右部分脱离文档流，中间部分平铺 -->
</body>
</html>

로그인 후 복사

유연한 상자 레이아웃

컨테이너를 사용하여 세 개의 열을 감싸고, 컨테이너의 표시를 왼쪽과 오른쪽으로 설정합니다. 부분은 고정으로 설정하고 가운데 플렉스는 1로 설정하고 왼쪽과 오른쪽 값은 고정해서 가운데는 적응형

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>弹性盒子创建三列布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            display: flex;
        }
        .left{
        width: 200px;
        height: 500px;
        background-color: yellow;
    }
    .center{
        height: 600px;
        flex: 1;
        background-color: purple;
    }
    .right{
        width: 300px;
        height: 500px;
        background-color: red;
    }
    </style>
</head>
<body>
    <div>
        <div>Left</div>
        <div>Center</div>  
        <div>Right</div>
    </div>
</body>
</html>

로그인 후 복사

위 내용은 CSS로 3열 레이아웃을 구현하는 방법은 무엇입니까? 3열 레이아웃을 구현하는 3가지 방법(코드 예시)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!