網頁布局——左側固定，右側自適應

本文轉載自查看原文 2019-04-23 16:11 594 css

第一種方法：采用絕對定位+BFC（overflow:auto）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
        }
        .right{
            height: 200px;
            margin-left: 200px;
            background: blue;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="left">左邊</div>
    <div class="right">右邊</div>
</body>
</html>

第二種方法：采用左浮動+BFC（overflow:auto）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .left{
            width: 200px;
            height: 200px;
            background: red;
            float: left;
        }
        .right{
            height: 200px;
            background: blue;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="left">左邊</div>
    <div class="right">右邊</div>
</body>
</html>

第三種方法：采用flex布局+BFC（overflow:auto）（推薦使用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            display: flex;
        }
        .left{
            width: 200px;
            height: 200px;
            background: red;
        }
        .right{
            height: 200px;
            background: blue;
            flex: 1;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="left">左邊</div>
        <div class="right">右邊</div>
    </div>
</body>
</html>

第四種：table布局（高度會自動撐開）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .main {
            display: table;
            width: 100%;
        }
        .left ,.right {
            display:table-cell;
            height:240px; 
        }
        .right{
            background-color: blue;
        }
        .left {
            width: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="main">
      <div class="left" >左邊</div>
      <div class="right" >右邊</div>
    </div>
</body>
</html>

第五種：grid網格布局+BFC(overflow:auto)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .main {
            display: grid;
            width: 100%;
            grid-template-rows: 200px;  /*設置行高*/
            grid-template-columns: 200px auto;  /*設置列數屬性*/
        }
        .right{
            background-color: blue;
        }
        .left {
            background-color: red;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="main">
      <div class="left" >左邊</div>
      <div class="right" >右邊</div>
    </div>
</body>
</html>

如果不觸發BFC，如果右邊內容超出右邊盒子的高度會出現內容往左邊靠和溢出的情況

第一種情況：浮動

第二種情況：絕對定位，flex布局，grid網格布局

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 網頁布局-左側固定，右側自適應 CSS自適應布局(左右固定中間自適應或者右側固定左側自適應) css左右布局，左側固定，右側自適應 CSS實現左側固定，右側自適應布局 flex左側固定寬度，右側自適應布局網頁html結構右側欄固定，左側自適應大小。 css布局--兩列布局，左側固定，右側自適應（其中左側要可以拖動，右側水平滾動條） CSS布局 -- 左側定寬，右側自適應 CSS 實現左側固定，右側自適應兩欄布局的方法 css實現兩欄布局，左側固定寬，右側自適應的7中方法