css常見的各種佈局上（兩列佈局）

常見的佈局上（兩列佈局） 1.常見的兩列佈局 1.1左邊固定，右邊自適應，左邊寬度已知，右邊預設占滿整行，使用left 左浮動，右邊不浮動，設置margin-left:左側寬度 1.2右側固定，寬度已知，左側自適應，記住固定的區域一定要放自適應區域的右邊，單列固定都是比較簡單的還有嵌套一層div方 ...

　　常見的佈局上（兩列佈局）

　　　　1.常見的兩列佈局

　　　　　　1.1左邊固定，右邊自適應，左邊寬度已知，右邊預設占滿整行，使用left 左浮動，右邊不浮動，設置margin-left:左側寬度

<style>
        .box{
            overflow: hidden;
            height: 500px;
            background-color: bisque;
        }
        .box .box-left {
            margin-left: 10px;
            width: 200px;
            min-height: 100%;
            float: left;
            background-color: pink;
        }
        .box .box-right {
            margin-left: 220px;
            margin-right: 10px;
            height: 100%;
            background-color: green;
        }
        header,footer {
            height: 75px;
            background-color: aqua;
        }
    </style>
<div class="box"> 
        <div class="box-left">
            11
        </div>
        <div class="box-right">
            1shishsihsishsihi是不變的沙發電視櫃很多水果和客戶的感慨的沙發電視櫃很多水果和客戶的感慨大蘇打撒郭德綱你只是  第三個大概瞭解斯大林經過拉絲幾個垃圾
        </div> 
    </div>

　　　　　　1.2右側固定，寬度已知，左側自適應，記住固定的區域一定要放自適應區域的右邊，

.box{
            height: 500px;
            background-color: bisque;
            position: relative;
        }
        .box .box-right {
            float: right;
            width: 200px;
            min-height: 100%;
            margin-right: 10px;
            background-color: pink;
        }
        .box .box-left {
            margin-left: 10px;
            margin-right: 220px;
            height: 100%;
            background-color: green;
        }
        header,footer {
            height: 75px;
            background-color: aqua;
        }
<div class="box"> 
        <div class="box-right">
            11
        </div>
        <div class="box-left">
            1shishsihsishsihi是不變的沙發電視櫃很多水果和客1111111111111111111111戶的感慨的沙發電視櫃很多水果和客戶的感慨大蘇打撒郭德綱你只是  
　　　　　　　　第三個大概瞭解斯大林經過拉絲幾個垃圾
        </div> 
    </div>

　　　　單列固定都是比較簡單的還有嵌套一層div方式，還有彈性佈局方式，還有grid佈局，都能實現單側固定

　　　　1.3 嵌套一層div ,左側固定，右側自適應佈局，使用雙浮動，右側自適應先寫入，左側使用margin-left:-100%

　　　　　　不嵌套一層div，右側直接使用margin-left:左側寬度也是可以的(這個代碼就不寫了，和第一個差不多)

<style>
        .box{
            height: 500px;
            background-color: bisque;
            position: relative;
            overflow: hidden;
        }
        .box .box-right {
            float: left;
            margin-left: -100%;
            width: 200px;
            min-height: 100%;
            background-color: pink;
        }
        .box .box-left {
            float: left;
            width: 100%;
            height: 100%;
            background-color: green;
        }
        .box .box-left .son {
            margin-left: 210px;
        }
        header,footer {
            height: 75px;
            background-color: aqua;
        }
    </style>

<body>
    <header>

    </header>
    <div class="box"> 
        <div class="box-left">
            <div class="son">
                1shishsihsishsihi是不變的沙發電視櫃很多水果和客1111111111111111111111戶的感慨的沙發電視櫃很多水果和客戶的感慨大蘇打撒郭德綱你只是 
　　　　　　　　　　 第三個大概瞭解斯大林經過拉絲幾個垃圾
            </div>
        </div> 
        <div class="box-right">
            11
        </div>
    </div>
    <footer>

    </footer>
</body>

　　　　1.4 t彈性佈局

<style>
        .box{
            height: 500px;
            background-color: bisque;
            position: relative;
            display: flex;
        }
        .box .box-left {
            margin-left: 10px;
            flex: 0 0 200px; /* 參數分別是 放大，縮小 初始大小 */
            background-color: pink;
        }
        .box .box-right {
            margin-left: 10px;
            margin-right: 10px;
            height: 100%;
            background-color: green;
        }
        header,footer {
            height: 75px;
            background-color: aqua;
        }
    </style>
<body>
    <header>

    </header>
    <div class="box"> 
        <div class="box-left">
            11
        </div>
        <div class="box-right">
            1shishsihsishsihi是不變的沙發電視櫃很多水果和客1111111111111111111111戶的感慨的沙發電視櫃很多水果和客戶的感慨
　　　　　　　　大蘇打撒郭德綱你只是  第三個大概瞭解斯大林經過拉絲幾個垃圾
        </div> 
    </div>
    <footer>

    </footer>
</body>

　　　　1.5 grid佈局,grid相對於flex的話屬於二維佈局，可以定義行數，定義列數，定義行高列高，寬度也可以自適應，設置父容器的display:grid。grid 有很大的相容性問題。慎用

　　　　　　使用grid 相當於設置行數為1，列數為2的grid佈局，使用grid可以很容易實現九宮格佈局

<style>
        .box{
            height: 500px;
            background-color: bisque;
            position: relative;
            display: grid;
            padding: 0 10px;
            grid-template-rows: 1fr;
            grid-template-columns: 200px auto;
            grid-gap: 10px;
        }
        .box .box-left {
            background-color: pink;
        }
        .box .box-right {
            background-color: green;
        }
        header,footer {
            height: 75px;
            background-color: aqua;
        }
    </style>
<body>
    <header>

    </header>
    <div class="box"> 
        <div class="box-left">
            11
        </div>
        <div class="box-right">
            1shishsihsishsihi是不變的沙發電視櫃很多水果和客1111111111111111111111戶的感慨的沙發電視櫃很多水果和客戶的感慨
　　　　　　　　大蘇打撒郭德綱你只是  第三個大概瞭解斯大林經過拉絲幾個垃圾
        </div> 
    </div>
    <footer>

    </footer>
</body>

　　　　使用grid實現9宮格佈局

<style>
        .box{
            height: 500px;
            background-color: bisque;
            position: relative;
            display: grid;
            padding: 0 10px;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-columns: 1fr 1fr 1fr;
            grid-gap: 10px;
        }
        .box .box-left {
            background-color: pink;
        }
        .box .box-right {
            background-color: green;
        }
        header,footer {
            height: 75px;
            background-color: aqua;
        }
    </style>
<body>
    <header>

    </header>
    <div class="box"> 
        <div class="box-left">
            11
        </div>
        <div class="box-right">
            1shishsihsishsihi是不變的沙發電視櫃很多水果和客1111111111111111111111戶的感慨的沙發電視櫃很多水果和客戶的感慨
　　　　　　　　大蘇打撒郭德綱你只是  第三個大概瞭解斯大林經過拉絲幾個垃圾
        </div> 
        <div class="box-left">
            11
        </div>
        <div class="box-right">
            1shishsihsishsihi是不變的沙發電視櫃很多水果和客1111111111111111111111戶的感慨的沙發電視櫃很多水果和客戶的感慨
　　　　　　　　大蘇打撒郭德綱你只是  第三個大概瞭解斯大林經過拉絲幾個垃圾
        </div> 
        <div class="box-left">
            11
        </div>
        <div class="box-right">
            1shishsihsishsihi是不變的沙發電視櫃很多水果和客1111111111111111111111戶的感慨的沙發電視櫃很多水果和客戶的感慨
　　　　　　　　大蘇打撒郭德綱你只是  第三個大概瞭解斯大林經過拉絲幾個垃圾
        </div> 
        <div class="box-left">
            11
        </div>
        <div class="box-right">
            1shishsihsishsihi是不變的沙發電視櫃很多水果和客1111111111111111111111戶的感慨的沙發電視櫃很多水果和客戶的感慨
　　　　　　　　大蘇打撒郭德綱你只是  第三個大概瞭解斯大林經過拉絲幾個垃圾
        </div> 
        <div class="box-left">
            11
        </div>
    </div>
    <footer>

    </footer>
</body>

View Code

　　　　1.6 使用定位實現左側固定右側自適應佈局，

　　　　　　1.6.1使用相對定位，該佈局，左側固定div 的高度已知，

<style>
        .box{
            height: 500px;
            background-color: bisque;
            position: relative;
        }
        .box .box-left {
            margin-left: 10px;
            width: 200px;
            height: 400px;
            background-color: pink;
        }
        .box .box-right {
            position: relative;
            top: -100%;
            margin-left: 220px;
            height: 100%;
            background-color: green;
            margin-right: 10px;
        }
        header,footer {
            height: 75px;
            background-color: aqua;
        }
    </style>
<body>
    <header>

    </header>
    <div class="box"> 
        <div class="box-left">
            11
        </div>
        <div class="box-right">
            1shishsihsishsihi是不變的沙發電視櫃很多水果和客1111111111111111111111戶的感慨的沙發電視櫃很多水果和客戶的感慨
            大蘇打撒郭德綱你只是  第三個大概瞭解斯大林經過拉絲幾個垃圾
        </div> 
    </div>
    <footer>

    </footer>
</body>

View Code

　　　　　　1.6.2 使用相對定位實現左側固定，右側自適應，div高度未知，將自適應的模塊放前面，固定寬度div設置top:-100%

<style>
        .box{
            height: 500px;
            background-color: bisque;
            position: relative;
        }
        .box .box-left {
            position: relative;
            top: -100%;
            margin-left: 10px;
            width: 200px;
            height: 400px;
            background-color: pink;
        }
        .box .box-right {
            margin-left: 220px;
            height: 100%;
            background-color: green;
            margin-right: 10px;
        }
        header,footer {
            height: 75px;
            background-color: aqua;
        }
    </style>
<body>
    <header>

    </header>
    <div class="box"> 
        <div class="box-right">
            1shishsihsishsihi是不變的沙發電視櫃很多水果和客1111111111111111111111戶的感慨的沙發電視櫃很多水果和客戶的感慨
            大蘇打撒郭德綱你只是  第三個大概瞭解斯大林經過拉絲幾個垃圾
        </div> 
        <div class="box-left">
            11
        </div>
    </div>
    <footer>

    </footer>
</body>

View Code

　　　　　　1.6.3 使用絕對定位，兩個模塊都使用絕對定位，可以不使用浮動

<style>
        .box{
            height: 500px;
            background-color: bisque;
            position: relative;
        }
        .box .box-left {
            position: absolute;
            margin-left: 10px;
            width: 200px;
            height: 400px;
            background-color: pink;
        }
        .box .box-right {
            position: absolute;
            margin-left: