css怎麼實現兩列佈局-css教學-PHP中文網

方法：1、兩個盒子元素都設定「dislpay:inline-block」；2、兩個盒子元素設定浮動；3、左側定寬元素浮動，右側元素設定margin-left，且值大於定寬元素的寬度；4、浮動BFC；5、絕對定位margin-left等。

css怎麼實現兩列佈局

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

一、什麼是兩列佈局

　　兩列佈局分為兩種，一種是左側定寬、右側自適應，另一種是兩列都自適應（即左側寬度由子元素決定，右側補齊剩餘空間）。在CSS面試題裡面屬於常考題，也是一個前端開發工程師必須掌握的技能，以下將分別介紹實作方式。

二、左側定寬、右側自適應如何實現？

1.雙inline-block

　　　　原理：兩個元素都設定dislpay:inline-block，為了消除html空格的影響，父元素的font-size需要設定為0，右側自適應元素的寬度使用calc函數計算。如果兩個元素的高度不一樣，可以為元素設定vertical-align:top調整。

　　　　缺點：由於父元素設定了font-size為0，子元素內文字不會顯示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
           *{
               padding: 0;
               margin: 0;
           }
            .box{
                height: 600px;
                width: 100%;
                font-size:0;
            }
            .left{
                display: inline-block;
                width: 100px;
                height: 200px;
                background-color: red;
                vertical-align: top;
                 
            }
            .right{
                display: inline-block;
                width: calc(100% - 100px);
                height: 400px;
                background-color: blue;
                vertical-align: top;
            }
             
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left">
                <span>1234</span>
            </div>
            <div class="right">
                <span>1234</span>
            </div>
        </div>
    </body>
</html>

登入後複製

#2.雙重浮動

　　　　原理：兩個元素設定浮動，右側自適應元素寬度使用calc函數計算

#　　　　缺點：缺點元素需要清除浮動

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                height: 600px;
                width: 100%;
 
            }
            .left{
                float: left;
                width: 100px;
                height: 200px;
                background-color: red;
            }
            .right{
                float: left;
                width: calc(100% - 100px);
                height: 400px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left">
                <span>
                    123adadadddddddddddddddddddddddddddddddddddddddd
                </span>
            </div>
            <div class="right"></div>
        </div>
    </body>
</html>

登入後複製

3.浮動margin

　　　　原理：左側定寬元素浮動，右側自適應元素設定margin-left的值大於定寬元素的寬度即可

　　　　缺點：父元素需要清除浮動

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                height: 600px;
                width: 100%;
 
            }
            .left{
                float: left;
                width: 100px;
                height: 200px;
                background-color: red;
            }
            .right{
                margin-left: 100px;
                height: 400px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left">
                <p>1234</p>
            </div>
            <div class="right">
                <p>1234</p>
            </div>
        </div>
    </body>
</html>

登入後複製

#4.浮動BFC

　　　　原理：父元素設定overflow:hidden,左側定寬元素浮動，右側自適應元素設定overflow:auto建立BFC

　　　　缺點：左側元素的內容如果超過設定寬度會重疊到右側元素上

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                height: 600px;
                width: 100%;
                overflow: hidden;
            }
            .left{
                float: left;
                width: 100px;
                height: 200px;
                background-color: red;
            }
            .right{
                overflow: auto;
                height: 400px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left">111111111111111111111111</div>
            <div class="right">111111111111111111111111111111111111111111111</div>
        </div>
        <div class="right"></div>
    </body>
</html>

登入後複製

5.absolute margin- left

　　　　原理：父元素相對定位，左側元素絕對定位，右側自適應元素設定margin-left的值大於定寬元素的寬度

　　　　缺點：父元素設定了相對定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                height: 600px;
                width: 100%;
                position: relative;
            }
            .left{
                position: absolute;
                width: 100px;
                height: 200px;
                background-color: red;
            }
            .right{
                margin-left: 100px;
                height: 400px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>
</html>

登入後複製

6.flex佈局

#　　　　原理：父元素設定display：flex，自適應元素設定flex：1

　　　　缺點：存在相容性問題，IE10以下不支援

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                height: 600px;
                width: 100%;
                display: flex;
            }
            .left{
                width: 100px;
                height: 200px;
                background-color: red;
            }
            .right{
                flex: 1;
                height: 400px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>
</html>

登入後複製

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .parent{
                display: table;
                width: 100%;
                 
            }
            .box{
                display: table-cell;
                width: 0.1%;
            }
            .left{
                margin-right: 20px;
                background-color: red;
                height: 200px;
            }   
            .right{
                display: table-cell;
                background-color: blue;
                height: 300px;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="box">
                <div class="left">126545453dddddddd453453453</div>
            </div>
            <div class="right">12121</div>
        </div>
    </body>
</html>

登入後複製

三、左右兩側元素都自適應

嚴格來講，並不算兩個元素都是自適應，只是將上面的定寬改為由子元素撐開而已

1.浮動BFC

原理和上面一樣，只是左側元素的寬度沒有設置，由子元素撐開

2.table佈局

原則：父元素display:table,左側元素外圍用一個div包裹，該div設定display:table-cell，width :0.1%（保證最小寬度），左側元素內部設定margin-right，右側元素設定display:table-cell。

缺點：IE7及以下不支持，當display:table時，padding失效，父元素的line-height屬性失效，當display:table-cell時，margin失效。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .parent{
                display:grid;
                grid-template-columns:auto 1fr;
                grid-gap:20px
            } 
            .left{
                background-color: red;
                height: 200px;
            }
            .right{
                height:300px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="left">1111111111111111111111111</div>
            <div class="right"></div>
        </div>
    </body>
</html>

登入後複製

3.flex佈局

#　　　　原理、缺點同上面的flex佈局