欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

css如何實(shí)現(xiàn)兩列布局

這篇文章主要介紹“css如何實(shí)現(xiàn)兩列布局”，在日常操作中，相信很多人在css如何實(shí)現(xiàn)兩列布局問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”css如何實(shí)現(xiàn)兩列布局”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比新昌網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式新昌網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋新昌地區(qū)。費(fèi)用合理售后完善，10余年實(shí)體公司更值得信賴。

方法：1、兩個(gè)盒子元素都設(shè)置“dislpay:inline-block”；2、兩個(gè)盒子元素設(shè)置浮動(dòng)；3、左側(cè)定寬元素浮動(dòng)，右側(cè)元素設(shè)置margin-left，且值大于定寬元素的寬度；4、浮動(dòng)+BFC；5、絕對(duì)定位+margin-left等。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

一、什么是兩列布局

兩列布局分為兩種，一種是左側(cè)定寬、右側(cè)自適應(yīng)，另一種是兩列都自適應(yīng)（即左側(cè)寬度由子元素決定，右側(cè)補(bǔ)齊剩余空間）。在CSS面試題里面屬于常考題，也是一個(gè)前端開發(fā)工程師必須掌握的技能，下面將分別介紹實(shí)現(xiàn)方式。

二、左側(cè)定寬、右側(cè)自適應(yīng)如何實(shí)現(xiàn)？

1.雙inline-block

原理：兩個(gè)元素都設(shè)置dislpay:inline-block，為了消除html空格的影響，父元素的font-size需要設(shè)置為0，右側(cè)自適應(yīng)元素的寬度使用calc函數(shù)計(jì)算。如果兩個(gè)元素的高度不一樣，可以給元素設(shè)置vertical-align:top調(diào)整。

缺點(diǎn)：由于父元素設(shè)置了font-size為0，子元素內(nèi)文字不會(huì)顯示

<!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.雙浮動(dòng)

原理：兩個(gè)元素設(shè)置浮動(dòng)，右側(cè)自適應(yīng)元素寬度使用calc函數(shù)計(jì)算

缺點(diǎn)：父元素需要清除浮動(dòng)

<!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.浮動(dòng)+margin

原理：左側(cè)定寬元素浮動(dòng)，右側(cè)自適應(yīng)元素設(shè)置margin-left的值大于定寬元素的寬度即可

缺點(diǎn)：父元素需要清除浮動(dòng)

<!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.浮動(dòng)+BFC

原理：父元素設(shè)置overflow:hidden,左側(cè)定寬元素浮動(dòng)，右側(cè)自適應(yīng)元素設(shè)置overflow:auto創(chuàng)建BFC

缺點(diǎn)：左側(cè)元素的內(nèi)容如果超過(guò)設(shè)定寬度會(huì)重疊到右側(cè)元素上

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

原理：父元素相對(duì)定位，左側(cè)元素絕對(duì)定位，右側(cè)自適應(yīng)元素設(shè)置margin-left的值大于定寬元素的寬度

缺點(diǎn)：父元素設(shè)置了相對(duì)定位

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

原理：父元素設(shè)置display：flex，自適應(yīng)元素設(shè)置flex：1

缺點(diǎn)：存在兼容性問(wèn)題，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>

三、左右兩側(cè)元素都自適應(yīng)

嚴(yán)格來(lái)講，并不算兩個(gè)元素都是自適應(yīng)，只是將上面的定寬改為由子元素?fù)伍_而已

1.浮動(dòng)+BFC

原理和上面一樣，只是左側(cè)元素的寬度沒(méi)有設(shè)置，由子元素?fù)伍_

2.table布局

原理：父元素display:table,左側(cè)元素外圍用一個(gè)div包裹，該div設(shè)置display:table-cell，width:0.1%（保證最小寬度），左側(cè)元素內(nèi)部設(shè)置margin-right，右側(cè)元素設(shè)置display:table-cell。

缺點(diǎn)：IE7及以下不支持，當(dāng)display:table時(shí)，padding失效，父元素的line-height屬性失效，當(dāng)display:table-cell時(shí)，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布局

原理、缺點(diǎn)同上面的flex布局

4.grid布局

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

缺點(diǎn)：兼容性太差，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>

到此，關(guān)于“css如何實(shí)現(xiàn)兩列布局”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

網(wǎng)頁(yè)標(biāo)題：css如何實(shí)現(xiàn)兩列布局
文章分享：http://chinadenli.net/article44/ggpihe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷型網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站建設(shè)、定制開發(fā)、服務(wù)器托管、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

營(yíng)銷型網(wǎng)站建設(shè)