css怎么實現兩列布局

有啊網站百科1652024-07-14 02:34:00

方法：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>

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

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

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: 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>

3.flex布局

　　　　原理、缺點同上面的flex布局

4.grid布局

　　　　原理：父元素設置display：grid，grid-template-columns:auto 1fr;（這個屬性定義列寬，auto關鍵字表示由瀏覽器自己決定長度。fr是一個相對尺寸單位，表示剩余空間做等分）grid-gap:20px（行間距）

　　　　缺點：兼容性太差，IE11都不支持，谷歌57以上才可以

<!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>

（學習視頻分享：css視頻教程）

以上就是css怎么實現兩列布局的詳細內容，更多請關注有啊網站百科其它相關文章！

網友評論

: Search

最新文章

隨機文章

最新網址

關注我們: $\"二維碼\"$
掃一掃二維碼關注我們的微信公眾號

分站導航：有啊工具網 web工具箱有啊搜索有啊外鏈網有啊京券網有啊淘券網
本站標簽：有啊網網址提交網站提交網站目錄網站收錄技術導航站長導航網址導航大全頭條網址提交
關于本站：? 有啊網站百科（www.yongsung168.cn）是一個綜合性的網址導航平臺，專注于收錄和推薦各類優質網站資源。無論您是在尋找辦公導航、技術導航、站長導航、AI導航還是其他類型的網址，有啊網站百科都能為您提供便捷、全面的網站導航服務。

css怎么實現兩列布局

一、什么是兩列布局

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

1.雙inline-block

2.雙浮動

3.浮動+margin

4.浮動+BFC

5.absolute+margin-left

6.flex布局

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

1.浮動+BFC

2.table布局

3.flex布局

4.grid布局

猜你喜歡

css如何實現自適應

css怎樣實現鼠標懸浮改變圖片

css怎么設置虛線分割線

css里solid是什么意思

css怎么去掉輸入框樣式

純CSS做一個煙花綻放動畫（代碼示例）

css樣式中有文字描邊嗎

詳解CSS content的使用機制，原來還可以這樣用！

手把手教你使用css3制作炫酷的導航欄效果（代碼詳解）

css文字水平垂直居中怎么設置

網友評論