CSS 兩列布局---左側固定，右側自適應

阿新 • • 發佈：2019-02-19

前端一個小面試題總結如下：
1、方法一，高度100%，左側float，右側自動寬度（會自動佔滿剩餘寬度）。
2、方法二，絕對定位absolute，使用方法一的HTML結構，左側絕對定位，拉出文件流，高度100%並設定一定寬度400px。右側自動寬度（將佔100%）並設定margin-left：400px。
3、方法三，右側寬度與高度均100%，左側部分float，使左側部分被包含到右側部分，如下面的HTML結構。
以下是程式碼結構：
至於其他的方法就不在寫了，道理都是一樣的

<!DOCTYPE html>
<html>
    <head>
        <meta 
 charset="UTF-8">
        <title></title>
    </head>
    <style>
    html{
         /*相容firefox的div高度100%*/
            height: 100%
    }
    .body{
        height: 100%;
    }
        .left{
            float: left;
            width: 400px;
            height: 100%;
            /*解決IE6的3px-Bug*/ 

           /*IE6下當浮動元素與非浮動元素相鄰時，3px的Bug就會出現，它會偏移3畫素。*/
            _margin-right: -3px;
            background-color:crimson;
            border:  1px solid burlywood;

        }
        .right{
            width: auto;
            height: 100%;
            background-color: forestgreen;
            border 
: 1px solid burlywood;
        }
    </style>
    <body>
        <div class="left">
            hello,親愛的小一姑娘
            <br />
            hello,親愛的小一姑娘
            <br />
            hello,親愛的小一姑娘
            <br />
            hello,親愛的小一姑娘
            <br />
            hello,親愛的小一姑娘
            <br />
            hello,親愛的小一姑娘
            <br />
            hello,親愛的小一姑娘
            <br />
            hello,親愛的小一姑娘
            <br />
            hello,親愛的小一姑娘
            <br />
            hello,親愛的小一姑娘
            <br />
            hello,親愛的小一姑娘
            <br />
            hello,親愛的小一姑娘
            <br />
        </div>
        <div class="right">
            hello,親愛的小一姑娘
            <br />
            hello,親愛的小一姑娘
            <br />
            hello,親愛的小一姑娘
            <br />
            hello,親愛的小一姑娘
            <br />
            hello,親愛的小一姑娘
            <br />
            hello,親愛的小一姑娘
            <br />
            hello,親愛的小一姑娘
            <br />
            hello,親愛的小一姑娘
            <br />
            hello,親愛的小一姑娘
            <br />
            hello,親愛的小一姑娘
            <br />
            hello,親愛的小一姑娘
            <br />
            hello,親愛的小一姑娘
            <br />      
        </div>

    </body>
</html>

CSS 兩列布局---左側固定，右側自適應

CSS 兩列布局---左側固定，右側自適應

CSS左側固定，右側自適應

左側固定，右側自適應的佈局方式(新增評論區大佬教的方法）

佈局 —— 左側固定，右側自適應

【前端攻城獅之路】CSS兩列布局——右側固定寬度、左側自適應

css之兩欄布局左側固定右側高度自適應

CSS兩列布局

CSS兩列布局總結

CSS兩列布局的N種實現

css左側固定寬度右側自適應

CSS實現左側固定寬度右側自適應的固比佈局

橫向兩列布局（左列固定，右列自適應）的4種CSS實現方式

DIV+CSS佈局第一部分，一列布局，兩列布局，三列布局以及組合佈局舉例說明

CSS佈局之兩列布局一列固定一列自適應

兩列布局：左側固定右側自適應

flex兩列布局，左邊固定（可摺疊），右邊自適應

左邊固定，右邊自適應布局的兩種實現

常用布局的實現（兩列布局、三列適應布局，兩列等高適應布局等）

慕課筆記利用css進行布局【兩列布局】

兩列布局，左邊自適應，右邊高度不定

CSS 兩列布局---左側固定，右側自適應

相關推薦